CSS3属性box-shadow轻松实现盒阴影效果

与text-shadow（文字阴影效果）的原理一样，只不过text-shadow是为文字做阴影，而box-shadow是为盒对象做阴影。这里的盒包括块状(block)、内联(inline)、内联块状对象(inline-block)。

如果对盒对象不清楚的童鞋，可以先去学习下什么是盒

一、box-shadow的语法结构

w3c的官方文档，先看一下： CSS3 box-shadow 属性。

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：水平阴影的偏移值，必需，可以为负值。
• v-shadow：纵向阴影的偏移值，必需，可以为负值。
• blur：阴影模糊值，可选，不能为负值。
• spread：阴影的扩展，可选，可以为负值。
• color：阴影的颜色，虽然是可选，但是在不同的浏览器里面解释不一样，有些是黑色，有些是透明，所以建议都要设置。具有透明度的阴影可以用rgba的值。
• inset：内阴影。可选，如果缺省，默认是外阴影（outset）。

至于box-shadow的兼容性，我写的文章几乎不考虑IE，不要怪我任性，因为我只是一个老师，不是一个设计师或者攻城狮，我不需要面对各种客户各种浏览器各种终端，我的地盘我做主！

说人话：老子写文章就是为了高兴，不想让IE破坏了我的兴致。

说实话：我也搞不懂IE各种版本各种乱七八糟的玩意儿@_@

如果你接受我的这个约定，欢迎你继续往下看。

和 text-shaodw一样，所有的阴影都来自于对原对象的复制

二、box-shadow的应用

先设置基础代码如下：

<div class="box">box-shadow</div>

.box{
    width:100px;
    height:100px;
    background-color:rgba(255,204,0,.5);	
    border-radius:10px;
    padding:10px;
    margin:10px;
}

再根据需要设置不同的类进行组合。

<div class="box bs1">box-shadow</div>

.bs1{
    box-shadow:120px 0px #ccc;}

阴影就是对原对象的复制，包括内边距和边框都属于box的占位范围，阴影也包括对内边距和边框的复制。但是阴影本身不占据布局的空间。

1、四方有一样模糊值的阴影

.bs2{
    box-shadow:0 0 20px #666;}

2、有5px扩展的阴影

.bs3{
    box-shadow:0 0 0 5px #333;}

阴影不像 border要占据布局的空间，因此要实现对象鼠标经过产生外围的边框，可以使用阴影的扩展来代替 border。

另外一个方法是利用 border的 transparent实现，不过不如 box-shadow的 spread扩展方便，可以看案例思考一下为什么。

如果使用 border，布局会产生影响。

3、拓展为负值的阴影

.bs4{
    box-shadow:0 15px 10px -15px #333;
    border:none;}

注意：要产生这样的效果，y轴的值和spread的值刚好是一样且相反的。其它边是一样的原理。

4、内阴影

.bs5{
    background-color:#1C8426;
    box-shadow:0px 0px 20px #fff inset;
}

可以直接为div这样的盒子设置 box-shadow盒阴影，但是不能直接为img图片设置盒阴影。

这样是无效的的：

/* 直接在图片上添加内阴影无效*/
.img-shadow img {
    box-shadow: inset 0 0 20px red;
}

可以通过为img的父容器div设置内阴影，然后让img的 z-index为-1，可以解决这个问题。但是这种做法不可以为父容器设置背景颜色，因为父容器的级别比图片高，设置了背景颜色会挡住图片。（我就无意识的犯了这个错，为父父级的容器设置了白色背景，死活看不见图片，搞了半天，还请教了大漠，大漠真的很nice，给我做了个demo，我才发现自己的错误。）

/* 在图片容器上添加内阴影，生效*/
.box-shadow {
    box-shadow: inset 0 0 20px red;
}
.box-shadow img {
    position: relative;
    z-index: -1;
}

当然，如果你非要在父容器上添加背景色，那么加上rgba的半透明背景色也不错。

还有一个更好的方法，不用考虑图片的层级，利用 :before伪元素可以实现，而且还可以为父容器添加背景颜色等。

/*给图片容器上添加伪元素或伪类，不用为img设置负值的z-index值了。有内阴影*/
.pseudo {
    position: relative;
    background-color:#FC3;
    padding:5px;
}
.pseudo:before {
    content:'';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset 0 0 40px #f00;
}

5、多个阴影

.bs6{
    box-shadow:40px 40px rgba(26,202,221,0.5),80px 80px rgba(236,43,120,.5);
    border-radius:0;}

此处使用了rgba的颜色值，黄色也是有半透明度的，但是透过黄色看不到下面的青色的阴影，而青色和最下面的粉色阴影却是有透明度的叠加的。

可见，阴影也是有层叠关系的，前面的阴影层级高，会压住后面的阴影。阴影和阴影之间的透明度可见，而主体的box的透明度对阴影不起作用。

在css的标准上有这样一幅图，介绍了 box-shadow的运行原理：

关于这幅图的理解，可以参考大漠的一段话，很透彻：

这张图可以告诉我们很多信息，比如说borer-radius圆角，阴影扩展、阴影模糊以及padding是如何影响对象阴影的：非零值的border-radius将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上。所以整个层级就是：边框>内阴影>背景图片>背景颜色>外阴影。因为大家都知道，我们的背景图片是在背景颜色之上的。

三、drop-shadow和box-shadow的区别

1、模拟投影的效果

比如这种，利用 :after和 :before伪元素来完成投影效果。

2、filter中的drop-shadow

box-shadow是盒阴影，是不会考虑alpha透明度的，所以，如果你的对象是具有透明度的，在 box-shadow和 drop-shadow下就存在很明显的差别。

.box{
    width:100px;
    height:100px;
    border:3px dashed #000000;
    border-radius:50px;
    margin:20px;
    }
.box-shadow{
    box-shadow:10px 10px 10px #000;}
.drop-shadow{
    filter:drop-shadow(2px 2px 2px #000);}

drop-shadow才是真正的投影。

遗憾的是这个滤镜目前的支持度不够友好，不然用在特殊造型上实在太好了。比如这种气泡框。

可见， box-shadow不支持 :after伪元素做出的造型，而 drop-shadow不仅对透明度支持良好，而且对伪元素的支持也很良好。

.talk{
    position:relative;
    width:200px;
    height:100px;
    background-color:#23AE1C;
    border-radius:100px/50px;
    }
.talk:after{
    content:"";
    position:absolute;
    top:85px;
    left:80px;
    transform:rotate(30deg);
    border-top:30px solid #23AE1C;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
     }
.box-shadow1{
    box-shadow:2px 5px 10px #666;}
.drop-shadow1{
    filter:drop-shadow(2px 5px 5px rgba(51,51,51,.8));}