Ist es möglich, Transparenz in CSS3-Box-Shadow festzulegen?

95

Ist es möglich, Transparenz für den Boxschatten festzulegen?

Das ist mein Code:

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

Antworten:

186

Ich nehme rgba()an, hier würde arbeiten. Immerhin unterstützt der Browser beide box-shadowund rgba()ist ungefähr gleich.

/* 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>
Erweitern Sie das Snippet

BoltClock
quelle
3
Hat für mich gearbeitet und das enorme Problem gelöst, dass farbbasierte Schatten nur für einen bestimmten Hintergrund funktionieren. Sie müssen sie also neu stylen, je nachdem, worüber sie sich befinden, was oft nicht möglich ist (ein Div, der sowohl ein Foto als auch Weiß abdeckt bg, in diesem Fall sieht Schatten oben auf dem Foto blass aus)
jerclarke
@jeremyclarke Ich hatte das gleiche Problem, bei dem ich den Schatten einer Schaltfläche benötigte, um mit mehreren Hintergrundfarben arbeiten zu können, ohne für jeden Hintergrund eine eindeutige Schattenfarbe definieren zu müssen. Transparentes Schwarz wirkt wie ein echter Schatten.
Clarus Dignus
3
rgba () funktioniert nicht für mich, wenn ich Chrom ändern möchteinput:-webkit-autofill
Samuel
Es ist immer Chrome, nicht wahr?
BoltClock
1
@Chris K.: Ich fürchte, Sie können dies nicht getrennt von der ursprünglichen Box-Shadow-Deklaration tun. Das nächste, was Sie bekommen können, ist mit rgba () - und CSS-Variablen, aber das bedeutet, dass benannte Farben nicht unterstützt werden, und Sie müssen die Variablen auf die Box-Shadow-Deklaration selbst anwenden. Die Hintergrundfarbe hat eine ähnliche Einschränkung, die hier behandelt wird . Siehe auch stackoverflow.com/questions/40010597/…
BoltClock