Apakah ada properti 'kotak-bayangan-warna'?

193

Saya memiliki CSS berikut:

box-shadow: inset 0px 0px 2px #a00;

Sekarang saya mencoba mengekstrak warna itu untuk membuat warna halaman 'skinnable'. Apakah ada cara untuk melakukan ini? Cukup menghapus warna, dan kemudian menggunakan tombol yang sama lagi kemudian menimpa aturan aslinya.

Sepertinya tidak ada box-shadow-color, setidaknya Google tidak menghasilkan apa-apa.

Epaga
sumber
17
Google tidak mengembalikan apa pun karena "-" di awal permintaan :)
elon

Jawaban:

130

Tidak:

http://www.w3.org/TR/css3-background/#the-box-shadow

Anda dapat memverifikasi ini di Chrome dan Firefox dengan memeriksa daftar gaya yang dihitung. Properti lain yang memiliki metode singkatan (seperti border-radius) memiliki variasi mereka yang ditentukan dalam spesifikasi.

Seperti kebanyakan properti CSS "lama" yang hilang, variabel CSS dapat menyelesaikan masalah ini:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}
Andy E
sumber
6
Itu penggunaan variabel yang bagus! Mari kita berharap bahwa mereka akan didukung di semua browser dalam beberapa tahun ke depan: /
fregante
1
... kecuali Anda masih mendukung IE 😭
Cam Jackson
301

Sebenarnya ... ada! Semacam. box-shadowdefault ke color, seperti borderhalnya.

Menurut http://dev.w3.org/.../#the-box-shadow

Warnanya adalah warna bayangan. Jika warnanya tidak ada, warna yang digunakan diambil dari properti 'warna'.

Dalam praktiknya, Anda harus mengubah colorproperti dan pergi box-shadowtanpa warna:

box-shadow: 1px 2px 3px;
color: #a00;

Dukung

  • Safari 6+
  • Chrome 20+ (setidaknya)
  • Firefox 13+ (setidaknya)
  • IE9 + (IE8 tidak mendukung box-shadowsama sekali)

Demo

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>

Bug yang disebutkan dalam komentar di bawah telah diperbaiki :)

fregante
sumber
3
Ada bug di Chrome 22 (canary) dalam animasi CSS yang menyebabkan box-shadow tidak mewarisi colorproperti animasi . code.google.com/p/chromium/issues/detail?id=133745
David Murdoch
14
Peretasan bagus, jika tidak ada teks di elemen.
phoenix
10
Ya, kalau tidak Anda harus membungkusnya dan mendaftar kembali colorke elemen anak.
gratis
3
Saya dapat mengkonfirmasi itu sama untuk IE10.
MaxArt
4
Terima kasih atas jawaban yang masuk akal dan relevan . +10 untukmu!
kumarharsh
4

Anda bisa menggunakan pra-prosesor CSS untuk melakukan skinning. Dengan Sass Anda dapat melakukan sesuatu yang mirip dengan ini:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

Jika itu bukan tema situs tetapi tema yang Anda butuhkan, maka Anda dapat melakukan ini: http://codepen.io/jjenzz/pen/EaAzo

jjenzz
sumber
2

Anda dapat melakukan ini dengan Variabel CSS

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}
sandeep kumar
sumber
-3

Yang cepat dan salin / tempel yang dapat Anda gunakan untuk Chrome dan Firefox adalah: (ubah item setelah # untuk mengubah warna)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

Jawaban Matt Roberts benar untuk browser webkit (safari, chrome, dll), tapi saya pikir seseorang di luar sana mungkin menginginkan jawaban cepat daripada disuruh belajar memprogram untuk membuat bayangan.

Dane Calderon
sumber
-5

Ya ada caranya

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset
Ivan Jelev
sumber
-8

Mungkin ini baru (saya juga lumayan css3), tapi saya punya halaman yang menggunakan persis apa yang Anda sarankan:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. dan berfungsi dengan baik untuk saya (setidaknya di Chrome).

Matt Roberts
sumber
14
Pertanyaannya adalah bagaimana mengubah hanya warna bayangan kotak.
Julian D.