有没有办法使用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稍微倾斜它。