如何用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

如果你只需要一個白色背景（或任何固定的背景顏色）你可以使盒子成爲一個圖像，彩色部分是透明的，邊緣是你的背景顏色。然後您將其設置爲背景圖像，而背景顏色可以控制框的顏色。