Existe-t-il une propriété 'box-shadow-color'?

J'ai le CSS suivant:

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

J'essaie maintenant d'extraire cette couleur pour rendre les couleurs de la page «skinnables». Y a-t-il une manière de faire ça? Le simple fait de supprimer la couleur, puis d'utiliser à nouveau la même clé plus tard, remplace la règle d'origine.

Il ne semble pas y avoir de box-shadow-color, au moins Google ne révèle rien.

Non:

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

Vous pouvez le vérifier dans Chrome et Firefox en consultant la liste des styles calculés. D'autres propriétés qui ont des méthodes abrégées (comme border-radius) ont leurs variations définies dans la spécification.

Comme pour la plupart des propriétés CSS "longues" manquantes, les variables CSS peuvent résoudre ce problème:

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

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

En fait… il y en a! Sorte de. box-shadowpar défaut color, tout comme le borderfait.

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

La couleur est la couleur de l'ombre. Si la couleur est absente, la couleur utilisée est tirée de la propriété 'color'.

En pratique, vous devez changer la colorpropriété et laisser box-shadowsans couleur:

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

Soutien

• Safari 6+
• Chrome 20+ (au moins)
• Firefox 13+ (au moins)
• IE9 + (IE8 ne prend pas box-shadowdu tout en charge)

Démo

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>

Le bogue mentionné dans le commentaire ci-dessous a depuis été corrigé :)

Vous pouvez utiliser un pré-processeur CSS pour faire votre skinning. Avec Sass, vous pouvez faire quelque chose de similaire à ceci:

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

Si ce n'est pas une thématisation à l'échelle du site mais une thématisation basée sur les classes dont vous avez besoin, vous pouvez le faire: http://codepen.io/jjenzz/pen/EaAzo

Vous pouvez le faire avec la variable 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 copier / coller rapide que vous pouvez utiliser pour Chrome et Firefox serait: (changez le truc après le # pour changer la couleur)

-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 réponse de Matt Roberts est correcte pour les navigateurs Webkit (safari, chrome, etc.), mais je pensais que quelqu'un pourrait vouloir une réponse rapide plutôt que de se faire dire d'apprendre à programmer pour créer des ombres.

Oui il y a un moyen

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

Peut-être que c'est nouveau (je suis aussi assez merdique à css3), mais j'ai une page qui utilise exactement ce que vous suggérez:

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

.. et cela fonctionne très bien pour moi (au moins dans Chrome).