Czy można ustawić przezroczystość w CSS3 box-shadow?

Czy można ustawić przezroczystość cienia pudełka?

To jest mój kod:

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

css

— Steven
źródło

190

Podejrzewam, rgba()że tutaj zadziała. W końcu obsługa przeglądarki dla obu box-shadowi rgba()jest mniej więcej taka sama.

/* 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>

Rozwiń fragment

— BoltClock
źródło

Pracowałem dla mnie i rozwiązałem olbrzymi problem polegający na tym, że cienie oparte na kolorach działają tylko dla danego tła, więc musisz zmienić ich styl w zależności od tego, na czym będą, co często nie jest możliwe (element div, który obejmuje zarówno zdjęcie, jak i biały bg, w takim przypadku cień wygląda blado na zdjęciu)

— jerclarke

@jeremyclarke Miałem ten sam problem, w którym potrzebowałem cienia przycisku do pracy z wieloma kolorami tła bez konieczności definiowania unikalnego koloru cienia dla każdego tła. Przezroczysta czerń działa jak prawdziwy cień.

— Clarus Dignus

rgba () nie działa u mnie, jeśli chcę zmienić chromeinput:-webkit-autofill

— Samuel

To zawsze Chrome, prawda?

— BoltClock

@Chris K .: Obawiam się, że nie będziesz w stanie tego zrobić niezależnie od oryginalnej deklaracji typu box-shadow. Najbliżej można uzyskać za pomocą rgba () i zmiennych CSS, ale oznacza to brak obsługi nazwanych kolorów i musisz zastosować zmienne do samej deklaracji box-shadow. background-color ma podobne ograniczenie, omówione tutaj . Zobacz także stackoverflow.com/questions/40010597/…

— BoltClock