Чи можна встановити прозорість у CSS3 box-shadow?

Чи можна встановити прозорість для тіні вікна?

Це мій код:

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

css

— Стівен
джерело

187

Думаю 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
джерело

Я працював для мене і вирішив величезну проблему, через яку тіні на основі кольорів працюють лише для певного фону, тому вам потрібно їх переробити залежно від того, над чим вони будуть, що часто неможливо (div, що охоплює як фотографію, так і білий bg, у цьому випадку тінь виглядає блідою поверх фотографії)

— jerclarke

@jeremyclarke Я стикався з тією ж проблемою, коли мені потрібна була тінь кнопки для роботи з кількома кольорами тла без необхідності визначати унікальний колір тіні для кожного фону. Прозорий чорний працює як справжня тінь.

— Clarus Dignus

rgba () у мене не працює, якщо я хочу змінити chrome'sinput:-webkit-autofill

— Samuel

Це завжди Chrome, чи не так.

— BoltClock

@Chris K .: Боюся, ви не зможете зробити це окремо від оригінальної декларації box-shadow. Найближче, що ви можете отримати, - це змінні rgba () та CSS, але це означає відсутність підтримки іменованих кольорів, і вам доведеться застосовувати змінні до самого оголошення box-shadow. background-color має подібне обмеження, описане тут . Також см stackoverflow.com/questions/40010597 / ...

— BoltClock