css - 如何使 css3 阴影“渐变”？

Question

我想使用 css3 阴影在方形 div 元素上创建渐变效果，只有左侧和右侧有阴影。换句话说，我想让阴影从顶部开始变暗，然后逐渐变浅到底部，但大约四分之一底部根本没有阴影，以创建 3d、倾斜的方形感觉。

这就是我的工作：

.sub_header {
 width:960px;
 height:300px;
 background:#fff;
 position:absolute; top:150px; left:50%; 
 margin-left:-480px;
 -moz-box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
 -webkit-box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
 box-shadow:6px 0px 5px -5px #666, -6px 0px 5px -5px #666;
}

提前致谢。

Answer 1

你不能那样做，因为 CSS3 的 box-shadow 只接受颜色。相反，您可以通过在其后面放置一个绝对 div 来模拟渐变效果。看看这个。

.sub_header:before
{
position: absolute;
z-index: -1;
top: 10%; left: 10%; /*use it as you wish */
width: 100%;
height: 100%;
background: linear-gradient(transparent, #666); 
content: '';
}

这应该这样做。