css - 如何制作 css3 投影 'gradient' ？

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 的盒子阴影只接受颜色。相反，您可以通过在其后面放置一个绝对 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: '';
}

应该这样做。