如何用CSS创建像这样的阴影div

Question

我需要创建像下图所示的阴影div，只使用CSS。任何想法如何使用较少的代码创建它们？

谢谢！

Answer 1

下面是使用CSS的盒子阴影，这是在Firefox 3.5+，Safari浏览器兼容的方法， 3+，Chrome，Opera 10.5+和IE9 +。

http://jsbin.com/usabe4

多box-shadow s的使用更加靠近多单box-shadow预期的效果能够：

#box1 { 
    background: yellow; 
    -moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange; 
    -webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange; 
    box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange; 
} 

Answer 2

放在彼此的顶部的两个div的（使用z-index）和下/右移动下一个两个像素。

Answer 3

是不是一个CSS3 box-shadow足够接近？

http://jsfiddle.net/4kS4F/

.box { 
    width: 120px; 
    height: 60px; 
    border: 1px solid #000; 
    background: yellow; 

    -webkit-box-shadow: 3px 3px 0px #777; 
    -moz-box-shadow: 3px 3px 0px #777; 
    box-shadow: 3px 3px 0px #777; 
} 

它支持多种浏览器：http://caniuse.com/#search=box-shadow

值得注意的例外是IE 7和8。如果你需要在那里工作，你可以使用CSS3 PIE提供box-shadow。

Answer 4

你尝试在CSS 3采用箱阴影：

box-shadow:5px 5px 0 #CCCCCC 

有关详情，请： http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm

Answer 5

如果你只需要一个白色背景（或任何固定的背景颜色）你可以使盒子成为一个图像，彩色部分是透明的，边缘是你的背景颜色。然后您将其设置为背景图像，而背景颜色可以控制框的颜色。