如何使用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-shadow来获得比单个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

您是否尝试在css 3中使用框阴影：

box-shadow:5px 5px 0 #CCCCCC

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

Answer 3

将两个div放在一起（使用z-index），然后向下/向右移动下面的两个像素。

Answer 4

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 5

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