Apakah ada properti 'kotak-bayangan-warna'?

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.

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;
}

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 :)

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

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

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.

Ya ada caranya

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

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).