Можно ли установить прозрачность в CSS3 box-shadow?

98

Можно ли установить прозрачность тени блока?

Это мой код:

  box-shadow:10px 10px 10px #000;
  -webkit-box-shadow:10px 10px 10px #000;
  -moz-box-shadow: 10px 10px 10px #000;
css Стивен
источник

Ответы:

190

Полагаю rgba(), здесь сработает. В конце концов, браузерная поддержка обоих box-shadowи rgba()примерно одинакова.

/* 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>
Развернуть фрагмент

BoltClock
источник
3
Работал на меня и решил огромную проблему, заключающуюся в том, что цветные тени работают только для заданного фона, поэтому вам нужно изменить их стиль в зависимости от того, на чем они будут, что часто невозможно (div, который охватывает как фотографию, так и белый цвет). bg, в этом случае тень выглядит бледной наверху фото)
jerclarke
@jeremyclarke Я столкнулся с той же проблемой, когда мне требовалась тень кнопки для работы с несколькими цветами фона без необходимости определять уникальный цвет тени для каждого фона. Прозрачный черный цвет работает как настоящая тень.
Кларус Дигнус,
3
rgba () не работает для меня, если я хочу изменить хромinput:-webkit-autofill
Сэмюэл
Это всегда Chrome, не так ли.
BoltClock
1
@Chris K .: Боюсь, вы не сможете сделать это отдельно от исходного объявления box-shadow. Самое близкое, что вы можете получить, - это переменные rgba () и CSS, но это означает отсутствие поддержки именованных цветов, и вы должны применить переменные к самому объявлению box-shadow. background-color имеет аналогичное ограничение, описанное здесь . Также см stackoverflow.com/questions/40010597/...
BoltClock