以编程方式生成纸张阴影

Question

在this page上，您会发现左边框有阴影。这是用图像完成的。是否可以使用CSS或其他任何方式完全以编程方式生成这样的阴影。

Answer 1

您正在寻找CSS3中的box-shadow属性。

规范语法是：

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

您可以使用以下语法在Mozilla和WebKit中支持：

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

（这些例子来自http://www.css3.info/preview/box-shadow/）

您可以在Internet Explorer中使用CSS3 Pie

获得兼容性

Answer 2

box-shadow属性available in css3可以帮助您解决此问题

对于浏览器兼容性，您可以这样设置，

#div {
-moz-box-shadow: 2px 3px 3px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
} 

属性

左右模糊和颜色