Existe uma propriedade 'box-shadow-color'?

Eu tenho o seguinte CSS:

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

Agora estou tentando extrair essa cor para tornar as cores da página 'skinnable'. Existe alguma maneira de fazer isso? Simplesmente remova a cor e, em seguida, use a mesma chave novamente para substituir a regra original.

Parece não haver box-shadow-color, pelo menos o Google não aparece nada.

Não:

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

Você pode verificar isso no Chrome e Firefox, verificando a lista de estilos computados. Outras propriedades que possuem métodos abreviados (como border-radius) têm suas variações definidas na especificação.

Como na maioria das propriedades CSS ausentes, as variáveis ​​CSS podem resolver esse problema:

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

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

Na verdade ... existe! Tipo de. box-shadowo padrão é color, assim como borderfaz.

De acordo com http://dev.w3.org/.../#the-box-shadow

A cor é a cor da sombra. Se a cor estiver ausente, a cor usada será retirada da propriedade 'color'.

Na prática, você deve alterar a colorpropriedade e deixar box-shadowsem uma cor:

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

Apoio, suporte

• Safari 6+
• Chrome 20 ou superior (pelo menos)
• Firefox 13 ou superior (pelo menos)
• IE9 + (IE8 não suporta box-shadownada)

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>

O bug mencionado no comentário abaixo foi corrigido :)

Você pode usar um pré-processador CSS para fazer sua aparência. Com o Sass, você pode fazer algo parecido com isto:

_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 não for um tema para todo o site, mas você precisar de temas baseados em classe, faça o seguinte: http://codepen.io/jjenzz/pen/EaAzo

Você pode fazer isso com a variável 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 */
}

Um rápido e copiar / colar que você pode usar para Chrome e Firefox seria: (altere o material após o # para alterar a cor)

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

A resposta de Matt Roberts está correta para os navegadores de webkit (safari, chrome, etc), mas pensei que alguém por aí poderia querer uma resposta rápida em vez de ser instruído a aprender a programar para fazer sombras.

Sim, há um jeito

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

Talvez isso seja novo (eu também sou muito ruim no css3), mas eu tenho uma página que usa exatamente o que você sugere:

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

.. e funciona bem para mim (pelo menos no Chrome).