box-shadow

box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。多个阴影效果会重叠作用。该属性可设置的值包括阴影的方向、 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

box-shaodw: inset? x-offset y-offset blur-radius spread-radius color;

inset

如果没有指定inset，默认阴影在边框外，即阴影向外扩散。 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下

x-offset、y-offset

用来设置阴影偏移量，如果两者都是 0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。

blur-radius

值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为 0，此时阴影边缘锐利。

spread-radius

取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。扩大部分可以认为是纯色的， 没有阴影效果。

color

就是阴影的颜色

具体可以查看demo

inset: color: #ff0000
x-offset: y-offset:
blur-radius: spread-radius:

box-shadow: 0px 0px 2px 0px #ff0000

一些胡乱的用法

1. blur-radius设置为0，通过设置spread-radius实现border的效果

   .test {
     border-radius: 20px;
     width: 100px;
     height: 100px;
     margin-left: 20px;
     margin-top: 20px;
     box-shadow: 0px 0 0px 2px red;
   }
   

   

2. 常用的一些灰色阴影效果

   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);