CSS3盒阴影box-shadow

本文介绍了CSS3中的盒子阴影box-shadow，包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等！以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果！

box-shadow属性的基本使用

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

共有6个参数，其中inset可以省略，省略情况下默认为外阴影。此外分别是阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影扩展半径、阴影颜色。
1.单边实影和单边阴影效果:

/*单边实影：模糊半径为0*/.top{      box-shadow:0px -5px 0 #ccc;    }/*单边阴影:阴影拓展半径必须配合使用！若没有扩展半径，则不是其他边也会有阴影效果*/.bottom{      box-shadow:0 5px 5px -3px #ccc;    }

2.四边相同阴影效果：分两种！

第一种：只设置阴影模糊半径和阴影颜色

    /*模糊半径+颜色*/    .box-shadow2{      width:200px;height:200px;      border:1px solid #ccc;      box-shadow: 0 0 10px #ccc;      margin: 10px;    }    /*在此基础上加上扩展半径可以加深阴影的深度（正值），也可向内压缩阴影(负值)，直到扩展半径等于模糊半径，阴影才完全消失。 */    .box-shadow3{      width:200px;height:200px;      border:1px solid #ccc;      box-shadow: 0 0 10px -1px #ccc;/*此刻阴影为完全消失，向内压缩了*/      margin: 10px;    }

第二种：只设置扩展半径和阴影颜色

/*设置阴影模糊半径和阴影颜色:模拟border边框，但不计入总大小*/  .box-shadow4{    width:200px;height:200px;    border:1px solid #ccc;    box-shadow: 0 0 0 10px #ccc;    margin:20px;  }

注意：设置阴影模糊半径和阴影颜色:模拟border边框，但不计入总大小，但要注意层级关系：边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上。

3.内阴影效果:

  /*内阴影效果*/  .inset-shadow{    width:200px;height:200px;    border:1px solid #ccc;    box-shadow:inset 3px 3px 10px #ccc;    margin: 10px;  }

注意：可能在图片上会需要设置内阴影效果，但实际上img内阴影是无效果的！思路：在img外添加一个div容器，设置它的box-shadow内阴影。

4.多层阴影效果：

/*多层阴影：先定义在最顶层*/  .box-shadow5{    width:200px;height:200px;    border:1px solid #ccc;    box-shadow:      5px 5px 5px red,      10px 10px 5px blue,      15px 15px 5px green,      20px 20px 5px orange;    margin:20px;  }

注意:多层阴影效果之间用逗号隔开。最先写的阴影显示在最顶层！

除此之外，可以根据第二点中第二种分类：只设置扩展半径和颜色，还能制作多色边框效果:

  /*多色边框*/  .box-shadow6{    width:200px;height:200px;    border:1px solid #ccc;    box-shadow:      0 0 0 1px red,      0 0 0 5px green,      0 0 0 8px blue,      0 0 0 12px yellow,      0 0 0 16px orange,      0 0 0 20px purple;    margin:20px;  }

注意:需明确层级顺序，不计入总大小，先定义先显示，但顶层的阴影不能太大，会遮住底部的阴影。显示颜色的宽度=该显示的实际宽度-前面阴影颜色的宽度 。

---

高级玩法：

1.曲边阴影效果：

实现思路：通过在元素前后加入伪元素before和after，利用border-radius制作特殊变形圆形，设置box-shadow，最后调整z-index图层层级关系即可。

HTML:

<div class="wrap effect">    <h1>Box-shadow Effect</h1></div>

CSS：

h3{text-align:center;}.wrap{    width:70%;height:200px;    margin:50px auto;    background:#fff;}.wrap h1{    font-size:25px;text-align:center;    line-height:200px;}.effect{    /*为后面添加的伪元素提供定位*/    position:relative;    box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;    -ms-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;}/*同时设置before和after伪元素可以增强曲边阴影效果*/.effect:after,.effect:before{    content:"";/*attr(title)可获取标签的属性*/    background:red;    /*特殊定位：可自适应外容器的大小变化*/    position:absolute;    top:50%;    bottom:0;    left:20px;    right:20px;    box-shadow:0 0 20px rgba(0,0,0,0.8);    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);    -ms-box-shadow:0 0 20px rgba(0,0,0,0.8);    /*圆角边框制作特殊圆形：四个角上水平距离为100px，垂直距离为10px，和border-radius:100px 10px;区别*/    border-radius:100px/10px;    /*调整图层层级*/    z-index:-1;}

效果图：

2.翘边阴影效果:

实现思路：添加伪元素before和after，设置宽高、阴影效果，再变形、旋转、最后调整层级关系。

HTML:

<ul class="box">    <li><img src="images/photo1.jpg" alt=""></li>    <li><img src="images/photo2.jpg" alt=""></li>    <li><img src="images/photo3.jpg" alt=""></li></ul>

CSS:

.box{    width:980px;height:auto;    margin:20px auto;border:1px solid red;    overflow:hidden;/*浮动问题*/}.box li{    width:300px;height:210px;    /*美观：背景颜色没有，底下添加的图层可看到*/    background:#fff;    margin:20px 10px;    float:left;    border:2px solid #efefef;    box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;/*多阴影叠加，内外阴影*/    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;    -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;    -ms-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;    /*为伪元素提供定位*/    position:relative;}.box li:before{    content:"";    /*宽高设置，定位*/    width:90%;height:80%;    position:absolute;    left:20px;bottom:8px;    background-color:transparent;    /*设置阴影效果*/    box-shadow:0 8px 20px rgba(0,0,0,0.6);    -webkit-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -moz-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -o-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -ms-box-shadow:0 8px 20px rgba(0,0,0,0.6);    /*变形，旋转*/    transform:skew(-12deg) rotate(-4deg);    -webkit-transform:skew(-12deg) rotate(-4deg);    -moz-transform:skew(-12deg) rotate(-4deg);    -o-transform:skew(-12deg) rotate(-4deg);    -ms-transform:skew(-12deg) rotate(-4deg);    /*层级调整*/    z-index:-2;}/*同上*/.box li:after{    content:"";    width:90%;height:80%;    position:absolute;    right:20px;bottom:8px;    background-color:transparent;    box-shadow:0 8px 20px rgba(0,0,0,0.6);    -webkit-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -moz-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -o-box-shadow:0 8px 20px rgba(0,0,0,0.6);    -ms-box-shadow:0 8px 20px rgba(0,0,0,0.6);    transform:skew(12deg) rotate(4deg);    -webkit-transform:skew(12deg) rotate(4deg);    -moz-transform:skew(12deg) rotate(4deg);    -o-transform:skew(12deg) rotate(4deg);    -ms-transform:skew(12deg) rotate(4deg);    z-index:-1;}.box li img{    width:290px;height:200px;    margin:5px;}

效果图：