CSS3 kutu gölgesinde şeffaflık ayarlamak mümkün müdür?

100

Kutu gölgesinde şeffaflık ayarlamak mümkün mü?

Bu benim kodum:

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

css

— Steven
kaynak

192

Sanırım rgba()burada çalışacak. Sonuçta, her ikisi için tarayıcı desteği box-shadowve rgba()aşağı yukarı aynı.

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

Snippet'i genişlet

— BoltClock
kaynak

Benim için çalıştı ve renk tabanlı gölgelerin yalnızca belirli bir arka plan için işe yaradığı muazzam problemi çözdü, bu yüzden onları neyin üzerinde olacaklarına bağlı olarak yeniden biçimlendirmeniz gerekir ki bu genellikle mümkün değildir (hem fotoğrafı hem de beyazı kapsayan bir div bg, bu durumda gölge fotoğrafın üstünde soluk görünüyor)

— jerclarke

@jeremyclarke Her arka plan için benzersiz bir gölge rengi tanımlamak zorunda kalmadan birden çok arka plan rengi üzerinde çalışmak için bir düğmenin gölgesine ihtiyaç duyduğum aynı sorunu yaşıyordum. Şeffaf siyah, gerçek bir gölge gibi çalışır.

— Clarus Dignus

rgba (), Chrome'u değiştirmek istersem benim için çalışmıyorinput:-webkit-autofill

— Samuel

Her zaman Chrome'dur, değil mi?

— BoltClock

@Chris K .: Korkarım bunu orijinal kutu-gölge beyanından ayrı olarak yapamayacaksınız. En yakın elde edebileceğiniz şey rgba () ve CSS değişkenleridir, ancak bu adlandırılmış renkler için destek olmadığı anlamına gelir ve değişkenleri kutu-gölge bildiriminin kendisine uygulamanız gerekir. background-color, burada ele alınan benzer bir sınırlamaya sahiptir . Ayrıca stackoverflow.com/questions/40010597/…

— BoltClock