以编程方式生成纸影

【问题标题】：Programmatically produce a paper shadow以编程方式生成纸影
【发布时间】：2011-06-18 00:33:15
【问题描述】：

在this page 上，您会注意到左边框上有一个阴影。它是用图像完成的。是否可以使用 CSS 或其他任何东西完全以编程方式产生这样的阴影。

【问题讨论】：

【解决方案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;
}

您可以在 Internet Explorer 中使用CSS3 Pie 获得此兼容性

【讨论】：

【解决方案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;
}

属性是

左右模糊和颜色

【讨论】：