有一个“盒子阴影颜色”属性?

我有以下的CSS:

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

现在我正在尝试提取该颜色以使页面颜色“skinnable”。 有没有办法做到这一点? 简单地删除颜色,然后再次使用相同的键将覆盖原始规则。

似乎没有一个box-shadow-color ,至less谷歌什么也没有变成什么。

没有:

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

您可以通过查看计算出的样式列表在Chrome和Firefox中validation这一点。 其他具有速记方法的属性(如border-radius )在规范中定义了其变体。

与大多数缺less的“长手”CSS属性一样, CSSvariables可以解决这个问题:

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

你可以在Firefox 31 +中试用。 不幸的是,在写这篇文章的时候,没有其他的浏览器可以正常工作。

其实…有! 有点。 box-shadow默认为color ,就像border一样。

根据http://dev.w3.org/…/#the-box-shadow

颜色是阴影的颜色。 如果颜色不存在,则使用的颜色取自“颜色”属性。

在实践中,你必须改变color属性,并留下没有颜色的box-shadow

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

支持

  • Safari 6+
  • Chrome 20+(至less)
  • Firefox 13+(至less)
  • IE9 +(IE8根本不支持box-shadow

演示

 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> 

你可以使用CSS预处理器来完成你的皮肤。 有了Sass,你可以做类似的事情:

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

如果这不是网站广泛的主题,但需要基于类的主题,那么你可以这样做: http : //codepen.io/jje​​nzz/pen/EaAzo

一个快速和复制/粘贴你可以使用的Chrome和Firefox将是:(改变#后的东西改变颜色)

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

Matt Roberts对于webkit浏览器(safari,chrome等)的回答是正确的,但是我认为那里有人可能需要一个快速的答案,而不是被告知学习编程来做一些阴影。

是的,有一种方法

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

也许这是新的(我也是在css3相当垃圾),但我有一个页面,使用正是你所build议的:

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

..它对我来说工作得很好(至less在Chrome中)。