带渐变的阴影CSS

时间:2012-10-15 09:47:29

标签: css gradient dropshadow

我正在使用HTML和CSS处理项目,我希望复制此网站上使用的内容。

http://slb.com/hse/hse_policy.aspx

围绕顶部的容器div的阴影,更重要的是如何在阴影上获得渐变,使其向下淡出?我知道如何获得实际的投影。

干杯

2 个答案:

答案 0 :(得分:0)

使用纯CSS无法做到这一点。您链接的网站使用大图片执行此操作:http://slb.com/images/gradient_1120.jpg - 您需要执行类似操作才能获得相同的效果。

答案 1 :(得分:0)

嗯,显然他们为此目的使用背景图片(http://slb.com/images/gradient_1120.jpg)。但你也可以在正文之前添加一些元素(可能是伪元素)并给它们一个渐变作为背景。

#bg-element-left {
    /* background-gradient from top right to bottom left */
}

#main content {
    /* styled as you wish */
}

#bg-element-right {
    /* background-gradient from top left to bottom right */
}