Y at-il une propriété 'box-shadow-color'?

Question

Je le CSS suivant:

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

Maintenant, je suis en train d'extraire cette couleur pour rendre les couleurs de la page 'skinnable. Y a-t-il une manière de faire ça? enlever simplement la couleur, puis en utilisant la même touche à nouveau plus tard la règle écrase d'origine.

Il ne semble pas être un box-shadow-color, au moins Google se place rien.

Answer 1

Non:

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

Vous pouvez vérifier dans Chrome et Firefox en vérifiant la liste des styles calculés. D'autres propriétés qui ont des méthodes sténographie (comme border-radius ) ont leurs variations définies dans les spécifications.

Comme avec la plupart des disparus "longue main" propriétés CSS, CSS les variables 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;
}

Answer 2

En fait ... il y a! Sorte de. par défaut box-shadow à color, tout comme le fait border.

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

  

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

Dans la pratique, vous devez changer la propriété color et congé box-shadow sans couleur:

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

Support

• Safari 6
• Chrome 20+ (au moins)
• Firefox 13+ (au moins)
• IE9 + (IE8 ne supporte pas du tout box-shadow)

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 été corrigé depuis:)

Answer 3

Vous pouvez utiliser un pré-processeur CSS pour faire votre écorcher. 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 l'échelle du site thématisation mais classe basée vous thématisation besoin, vous pouvez le faire: http: / /codepen.io/jjenzz/pen/EaAzo

Answer 4

Vous pouvez le faire avec 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 */
}

Answer 5

Un rapide et copier / coller vous pouvez utiliser pour Chrome et Firefox serait: (changer les choses 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 Roberts Matt est correct pour les navigateurs WebKit (Safari, Chrome, etc.), mais je pensais que quelqu'un là-bas pourrait vouloir une réponse rapide plutôt que d'être dit d'apprendre à programmer pour faire des ombres.

Answer 6

Oui, il y a une façon

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

Answer 7

Peut-être est nouveau (je suis aussi assez merde à 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 il fonctionne très bien pour moi (en chrome au moins).