有一个“盒子阴影颜色”属性？
我有以下的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/jjenzz/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中）。
