Apakah mungkin untuk mengatur transparansi dalam CSS3 box-shadow?

96

Apakah mungkin untuk mengatur transparansi pada bayangan kotak?

Ini kode saya:

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

Jawaban:

187

Saya kira rgba()akan bekerja di sini. Bagaimanapun, dukungan browser untuk keduanya box-shadowdan rgba()kurang lebih 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>
Luaskan cuplikan

BoltClock
sumber
3
Bekerja untuk saya dan memecahkan masalah besar bahwa bayangan berbasis warna hanya berfungsi untuk latar belakang tertentu, jadi Anda perlu mengatur ulang gaya mereka tergantung pada apa yang akan mereka selesaikan yang seringkali tidak mungkin (div yang mencakup foto dan putih bg, dalam hal ini bayangan tampak pucat di atas foto)
jerclarke
@jeremyclarke Saya mengalami masalah yang sama di mana saya memerlukan bayangan tombol untuk bekerja pada beberapa warna latar belakang tanpa harus menentukan warna bayangan unik untuk setiap latar belakang. Hitam transparan berfungsi seperti bayangan sejati.
Clarus Dignus
3
rgba () tidak bekerja untuk saya, jika saya ingin mengubah chromeinput:-webkit-autofill
Samuel
Selalu Chrome, bukan.
BoltClock
1
@ Chris K .: Saya khawatir Anda tidak akan dapat melakukan ini secara terpisah dari deklarasi box-shadow asli. Yang paling dekat yang bisa Anda dapatkan adalah dengan variabel rgba () dan CSS, tetapi itu berarti tidak ada dukungan untuk warna bernama, dan Anda harus menerapkan variabel ke deklarasi box-shadow itu sendiri. background-color memiliki batasan serupa, dibahas di sini . Juga lihat stackoverflow.com/questions/40010597/…
BoltClock