如何用褪色的侧边栏创建CSS阴影效果

嗨，我不太确定如何创建附加的图像效果，其中右侧是我的主要内容，它在我的左侧侧边栏上着色，该侧边栏具有向下渐变效果。如何用褪色的侧边栏创建CSS阴影效果

alt text

2010-06-09 lisburnite

检查了这一点：CSS3 gradient Generator，挑选颜色并生成代码，然后在你的CSS（或其他元素你想要它）添加到body。

.body /*or element of your choice*/ 
-webkit-gradient(
{ 
    linear, 
    left bottom, 
    left top, 
    color-stop(0.02, rgb(91,204,245)), 
    color-stop(0.76, rgb(5,37,70)) 
) 
-moz-linear-gradient(
    center bottom, 
    rgb(91,204,245) 2%, 
    rgb(5,37,70) 76% 
) 
}

对于来自你的主要内容使用的影子：

.MyElement 
{ 
box-shadow: 10px 10px 5px #888; 
}

而且还检查了CSS3 Box-shadow。

此外，由于并非所有浏览器都支持box-shadow（IE），因此您可以使用border images。但IE并不支持这样做，我在一个网站上做的只是制作一个1px高的PNG图像的阴影，并将其设置为我的包装div的背景，重复它down/up（不记得是否这是X或Y），它工作得很好:)

希望一些帮助。

来源

2010-06-09 08:42:30 Kyle

的IE没有按” t也支持边界图像。（并且我认为你的意思是你的最后一句话中的盒子阴影） – oezi 2010-06-09 08:49:30

编辑，谢谢:) – Kyle 2010-06-09 08:53:04

啊谢谢，这看起来更好 – lisburnite 2010-06-09 11:08:46

您的边栏应该使用具有不透明度/透明度的png图像，然后带阴影的边栏将使用渐变背景。（请注意，IE6不会像这样的解决方案，所以你必须找到一个IE6PNG黑客的解决方案，可几乎无处不在现今发现的）对于渐变背景，可以创建一个背景图片或使用css3 gradient

来源

2010-06-09 08:46:51

但是，我如何编码这个，我很新的CSS – lisburnite 2010-06-09 10:50:50

img.shady 
{ 
    display: inline-block; 
    webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 
    padding: 10px; 
    margin-bottom: 5px !important; 
    min-height: 240px; 
    width: 630px; 
    border: 1px solid #D7D7D7 
}

来源

2012-07-16 23:13:44 Dave

如何用褪色的侧边栏创建CSS阴影效果

回答

相关问题