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