盒阴影

box-shadow: none | [[<offest-x> <offset-y>] <blur-radius>? <spread-radius>? <color>? inset?]

• 默认取值 none
• <offset-x> 必选项，盒阴影水平方向的偏移量，正方向为水平向右
• <offset-y> 必选项，盒阴影垂直方向的偏移量，正方向为垂直向下
• <blur-radius> 可选项，盒阴影的模糊程度，可以理解为阴影离盒子的距离，越远阴影越模糊
• <spread-radius> 可选项，盒阴影的大小，取值为 0 即默认值，和盒子大小一致
• <color> 可选项，盒阴影的颜色，默认与盒子的 color 属性一致
• inset 可选项，设置为内部盒阴影，此时的 <offset-x> 设置的就是阴影从盒内部左边框开始的偏移量，<offset-y> 设置的是阴影从盒内部上边框开始的偏移量

需要注意的几个地方：

• offset-x、offset-y、spread-radius 可以为负值，但是 blur-radius 不可以为负值
  • offset-x 和 offset-y 是阴影偏移量，自然可以为负值
  • spread-radius 表示阴影扩散大小，可以理解为阴影大小，是基准于原盒子大小来变化的，所以可以取负值
  • blur-radius 表示阴影模糊程度，为 0 表示阴影不模糊，无法取负值
• box-shadow 可以取多组值，表示设置不同的盒阴影，先设置的权重越大，可以覆盖后面设置的盒阴影

下面来看几个例子：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  
  box-shadow: 3px 2px 3px 1px gray;
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  
  box-shadow: 3px 2px 3px 1px gray inset;
}

另外，盒阴影是可以设置多组的，每组通过逗号分隔：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  
  box-shadow: 3px 2px 3px 1px gray, -3px -2px 3px 1px orange;
}