Est-il possible de définir la transparence dans CSS3 box-shadow?

96

Est-il possible de définir la transparence sur l'ombre de la boîte?

Voici mon code:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;
css Steven
la source

Réponses:

187

Je suppose que rgba()cela fonctionnerait ici. Après tout, le navigateur prend en charge les deux box-shadowet rgba()est à peu près le même.

/* 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>
Développer l'extrait

BoltClock
la source
3
A travaillé pour moi et a résolu l'énorme problème que les ombres basées sur la couleur ne fonctionnent que pour un arrière-plan donné, vous devez donc les redéfinir en fonction de ce sur quoi elles seront, ce qui n'est souvent pas possible (une div qui couvre à la fois une photo et du blanc bg, auquel cas l'ombre semble pâle en haut de la photo)
jerclarke
@jeremyclarke Je rencontrais le même problème où j'avais besoin de l'ombre d'un bouton pour travailler sur plusieurs couleurs d'arrière-plan sans avoir à définir une couleur d'ombre unique pour chaque arrière-plan. Le noir transparent fonctionne comme une véritable ombre.
Clarus Dignus
3
rgba () ne fonctionne pas pour moi, si je veux changer de chromeinput:-webkit-autofill
Samuel
C'est toujours Chrome, n'est-ce pas.
BoltClock
1
@Chris K.: J'ai bien peur que vous ne puissiez pas faire cela séparément de la déclaration d'origine box-shadow. Le plus proche que vous pouvez obtenir est avec rgba () et les variables CSS, mais cela signifie qu'il n'y a pas de support pour les couleurs nommées, et vous devez appliquer les variables à la déclaration box-shadow elle-même. background-color a une limitation similaire, abordée ici . Voir aussi stackoverflow.com/questions/40010597/…
BoltClock