是否可以将渐变应用于箱形阴影?
问题描述:
我正尝试用css3创建褪色的浮雕盒子阴影。到现在为止,我有一个浮雕的盒子阴影,感谢this教程和this one。是否可以将渐变应用于箱形阴影?
结合这两个指南,我想知道是否有任何方法来应用渐变盒阴影?
在这里你会发现什么,我试图创建:
这里的问题是:
注意,暗箱阴影应该褪色。
在这里找到的代码:http://jsfiddle.net/xkc8Lvs1/
.nav-tabs:after {
content:"";
height: 2px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.0) 100%);
display: block;
margin: 10px 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.0);
}
答
这里是一个解决方案,是使用一个对象和两个线性梯度。这些显然不是方块阴影,但是您可以为元素添加阴影框,如下面的示例所示。
使用此的downsite是,该linear gradient are IE10+和box-shadow can be used IE9+
的js小提琴演示:http://jsfiddle.net/urwjb06x/1/
.separator {
height: 2px;
border:none;
background-color: transparent;
background-image:
linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
linear-gradient(90deg, rgba(255,255, 255,0), rgba(255, 255, 255, 1), rgba(255,255,255,0));
box-shadow: rgba(255,255,255,0.8) 0 0 20px;
background-repeat: no-repeat;
background-position: 0 0, 0 1px;
background-size: 100% 1px;
}
更新:现在看起来是正确的Firefox浏览器。我忘了将rgba(0,0,0,0)
更改为rgba(255,255,255,0)
,这当然是一个巨大的差异。 (here i found the eye opener)
@HashemQolami我只是更新了问题 – 2014-11-02 12:26:52
哦..我明白了。我撤回了我的评论。但是,如果有任何问题,最好发布当前代码。 – 2014-11-02 12:29:14