Y a-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 «pelables». Y a-t-il une manière de faire ça? Il suffit de supprimer la couleur, puis d’utiliser à nouveau la même clé pour écraser la règle d’origine.

Il ne semble pas y avoir de box-shadow-color , au moins Google ne fait rien.

Non:

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

Vous pouvez le vérifier dans Chrome et Firefox en vérifiant la liste des styles calculés. D’autres propriétés ayant 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 “à main levée”, 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; } 

Vous pouvez l’ essayer dans Firefox 31+. Malheureusement, au moment de la rédaction de ce document, aucun autre navigateur n’a d’implémentation fonctionnelle.

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

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 provient de la propriété ‘color’.

En pratique, vous devez changer la propriété de color et laisser box-shadow sans couleur:

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

Soutien

  • Safari 6+
  • Chrome 20+ (au moins)
  • Firefox 13+ (au moins)
  • IE9 + (IE8 ne supporte absolument pas 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%; } 
 

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 la thématique du site mais la thématique basée sur la classe dont vous avez besoin, alors vous pouvez le faire: http://codepen.io/jjenzz/pen/EaAzo

Un rapide et copier / coller que vous pouvez utiliser pour Chrome et Firefox serait: (changez 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 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 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 un peu nul sur css3), mais j’ai une page qui utilise exactement ce que vous proposez:

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

.. et ça marche bien pour moi (en Chrome au moins).