边框阴影 box-shadow

box-shadow是向元素添加阴影.

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
/*
* 参数介绍
* X轴偏移量    水平阴影的位置 负数代表反方向
* Y轴偏移量    垂直阴影的位置 负数代表反方向
* 阴影模糊半径 只能是为正值，如果为0时，表示阴影不具有模糊效果，
* 阴影扩展半径 可正可负，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
* 阴影颜色     默认为黑色
* 投影方式     默认为外部阴影,inset为内部阴影
*/

inset写在最后,不然无效
X,Y轴偏移量都为0表示从四周产生阴影
外阴影

div{
  height:100px;
  width:100px;
  box-shadow:5px 10px 6px #333333; 
}

内阴影

div{
  height:100px;
  width:100px;
  box-shadow:5px 10px 6px #333333 inset; 
}

加多个阴影,用逗号,隔开即可

div{
  height:100px;
  width:100px;
  box-shadow:5px 10px 6px  #f00, 5px 10px 6px  #0f0, 0px 0px 1px 5px #00f inset;
}