我正在使用 HTML 和 CSS 做一个项目,我想复制这个网站上使用的类似内容。
http://slb.com/hse/hse_policy.aspx
围绕容器 div 顶部的阴影,更重要的是,如何在阴影上获得渐变,使其向底部淡出?我知道如何获得实际的阴影。
干杯
我正在使用 HTML 和 CSS 做一个项目,我想复制这个网站上使用的类似内容。
http://slb.com/hse/hse_policy.aspx
围绕容器 div 顶部的阴影,更重要的是,如何在阴影上获得渐变,使其向底部淡出?我知道如何获得实际的阴影。
干杯
纯 CSS 没有办法做到这一点。您链接的站点使用大图像来执行此操作:http ://slb.com/images/gradient_1120.jpg - 您需要做类似的事情才能获得相同的效果。
好吧,显然他们为此目的使用了背景图像( http://slb.com/images/gradient_1120.jpg )。但是你也可以在 body 之前添加一些元素(可能是伪元素)并给它们一个渐变作为背景。
#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 */
}