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