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

Question

想象一下如下的软件框：

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

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

Answer 1

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

<div id="triangle"></div>

#triangle {
    width: 0;
    height: 0;
    border-top: 100px solid grey;
    border-left: 100px solid transparent;
    opacity:0.1;
}​

see example

然后添加线性渐变并将其放置在图像后面。以这个gradient generator为出发点。

然后你可以使用transform稍微扭曲一下。