Esiste una proprietà 'box-shadow-color'?

Ho il seguente CSS:

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

Ora sto cercando di estrarre quel colore per rendere i colori della pagina "personalizzabili". C'è un modo per farlo? Semplicemente rimuovendo il colore, e quindi usando di nuovo la stessa chiave in seguito si sovrascrive la regola originale.

Non sembra esserci un box-shadow-color, almeno Google non accende nulla.

No:

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

Puoi verificarlo in Chrome e Firefox controllando l'elenco degli stili calcolati. Altre proprietà che hanno metodi abbreviati (come border-radius) hanno le loro varianti definite nelle specifiche.

Come con la maggior parte delle proprietà CSS "lunghe" mancanti, le variabili CSS possono risolvere questo problema:

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

#el:hover {
    --box-shadow-color: goldenrod;
}

In realtà ... c'è! Una specie di. box-shadowper impostazione predefinita color, proprio come borderfa.

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

Il colore è il colore dell'ombra. Se il colore è assente, il colore utilizzato viene preso dalla proprietà 'color'.

In pratica, devi cambiare la colorproprietà e partire box-shadowsenza un colore:

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

Supporto

• Safari 6+
• Chrome 20+ (almeno)
• Firefox 13+ (almeno)
• IE9 + (IE8 non supporta box-shadowaffatto)

dimostrazione

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>

Il bug menzionato nel commento qui sotto è stato corretto :)

È possibile utilizzare un pre-processore CSS per eseguire lo skinning. Con Sass puoi fare qualcosa di simile a questo:

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

Se non si tratta di temi a livello di sito ma di temi basati su classi, è necessario: http://codepen.io/jjenzz/pen/EaAzo

Puoi farlo con la variabile 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 */
}

Un rapido e copia / incolla che puoi usare per Chrome e Firefox sarebbe: (cambia le cose dopo il # per cambiare il colore)

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

La risposta di Matt Roberts è corretta per i browser webkit (safari, chrome, ecc.), Ma ho pensato che qualcuno là fuori avrebbe potuto desiderare una risposta rapida piuttosto che sentirsi dire di imparare a programmare per creare delle ombre.

Sì, c'è un modo

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

Forse questo è nuovo (sono anche abbastanza schifo su css3), ma ho una pagina che utilizza esattamente ciò che mi suggerisci:

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

.. e funziona bene per me (almeno in Chrome).