有没有办法使用CSS创建软件框的背景阴影？

Question

想象一下如下的软件盒:

http://www.sitellite.org/pix/sitellite-box.gif

现在想象阴影不在那里.是否有一种CSS方式可以模拟背景阴影,至少可以使用Firefox和Chrome,如果不是IE9及以上？

Answer 1

一种方法是从这样的三角形开始

\n\n

<div id="triangle"></div>\n\n#triangle {\n    width: 0;\n    height: 0;\n    border-top: 100px solid grey;\n    border-left: 100px solid transparent;\n    opacity:0.1;\n}\xe2\x80\x8b\n

\n\n

参见示例

\n\n

然后添加线性渐变并将其放置在图像后面。看一下这个梯度生成器作为起点。

\n\n

然后你可以使用变换稍微倾斜它。

\n