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.
css
box-shadow
Epaga
sumber
sumber
Jawaban:
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:
sumber
Sebenarnya ... ada! Semacam.
box-shadow
default kecolor
, sepertiborder
halnya.Menurut http://dev.w3.org/.../#the-box-shadow
Dalam praktiknya, Anda harus mengubah
color
properti dan pergibox-shadow
tanpa warna:Dukung
box-shadow
sama sekali)Demo
Bug yang disebutkan dalam komentar di bawah telah diperbaiki :)
sumber
color
properti animasi . code.google.com/p/chromium/issues/detail?id=133745color
ke elemen anak.Anda bisa menggunakan pra-prosesor CSS untuk melakukan skinning. Dengan Sass Anda dapat melakukan sesuatu yang mirip dengan ini:
_theme1.scss:
_theme2.scss:
styles.scss:
Jika itu bukan tema situs tetapi tema yang Anda butuhkan, maka Anda dapat melakukan ini: http://codepen.io/jjenzz/pen/EaAzo
sumber
Anda dapat melakukan ini dengan Variabel CSS
sumber
Yang cepat dan salin / tempel yang dapat Anda gunakan untuk Chrome dan Firefox adalah: (ubah item setelah # untuk mengubah warna)
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.
sumber
Ya ada caranya
sumber
Mungkin ini baru (saya juga lumayan css3), tapi saya punya halaman yang menggunakan persis apa yang Anda sarankan:
.. dan berfungsi dengan baik untuk saya (setidaknya di Chrome).
sumber