È possibile impostare la trasparenza in CSS3 box-shadow?

È possibile impostare la trasparenza sull'ombra del riquadro?

Questo è il mio codice:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;

css

— Steven
fonte

186

Suppongo rgba()che funzionerebbe qui. Dopo tutto, il supporto del browser per entrambi box-shadowed rgba()è più o meno lo stesso.

/* 50% black box shadow */
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

div {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    background-color: red;
    margin: 10px;
}

div.a {
  box-shadow: 10px 10px 10px #000;
}

div.b {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

<div class="a">100% black shadow</div>
<div class="b">50% black shadow</div>

Espandi lo snippet

— BoltClock
fonte

Ha funzionato per me e ha risolto l'enorme problema che le ombre basate sul colore funzionano solo per un determinato sfondo, quindi è necessario ridisegnarle a seconda di cosa saranno sopra il che spesso non è possibile (un div che copre sia una foto che il bianco bg, nel qual caso l'ombra appare pallida sulla parte superiore della foto)

— jerclarke

@jeremyclarke Stavo riscontrando lo stesso problema in cui avevo bisogno dell'ombra di un pulsante per lavorare su più colori di sfondo senza dover definire un colore dell'ombra univoco per ogni sfondo. Il nero trasparente funziona come una vera ombra.

— Clarus Dignus

rgba () non funziona per me, se voglio cambiare chromeinput:-webkit-autofill

— Samuel

È sempre Chrome, non è vero.

— BoltClock

@ Chris K .: Temo che non sarai in grado di farlo separatamente dalla dichiarazione originale della scatola-ombra. Il più vicino che puoi ottenere è con le variabili rgba () e CSS, ma questo significa nessun supporto per i colori con nome e devi applicare le variabili alla dichiarazione box-shadow stessa. background-color ha una limitazione simile, trattata qui . Vedere anche stackoverflow.com/questions/40010597/...

— BoltClock