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

Question

嗨我不太确定如何创建附加的图像效果，其中右侧是我的主要内容，并且它在我的左侧边栏上呈现向下渐变效果。

Answer 1

选中此项：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的背景，向下/向上重复（不记得是否这是X或Y​​）并且它运行良好：）

希望其中一些有用。

Answer 2

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
}

Answer 3

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