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

Question

我需要使用CSS创建如下图所示的阴影div.有关如何使用较少编码创建它们的任何想法？

谢谢!

Answer 1

这是一种使用CSS的box-shadow的方法,它兼容Firefox 3.5 +,Safari 3 +,Chrome,Opera 10.5+和IE9 +.

http://jsbin.com/usabe4

多个box-shadows用于接近所需效果,而不是单个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;
}