html - 如何创建带有褪色侧边栏的 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)，它工作得很好 :)

希望其中一些有所帮助。