如何制作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: '';
}

这应该这样做。