1.CSS知识点：

box-shadow：<inset> |<offset-x> |<offset-y>|<blur-radius>|<spread-radius>|<color>

  1. a.(inset-内阴影，默认是外，省略不填) 
  2. b.offset-x  x轴投影大小 ,正向右负向左
  3. c.offset-y  y轴投影大小，正向右负向左
  4. d.blur-radius 模糊大小 
  5. e.spread-radius 扩展大小，默认为0，省略，正向外，负向内 
  6. f.color  颜色取值

2.实战应用：

box-shadow 实现多重边框效果，注意这里不是真正意义上的border，它是通过利用投影的第四个属性(spread-radius)向内外扩展，需要几层投影就用英文,符号区分 例如：用此属性实现塑胶跑道效果 box-shadow: 0 0 0 5px red,0 0 0 10px white,0 0 0 15px red,0 0 0 20px white,0 0 0 25px red;

效果图：

box-shadow属性详解及实现多重边框

3.特别注意：

box-shadow会撑出原始box的宽高范围,如果父级加入了溢出隐藏overflow: hidden，那么后果就不言而喻了——隐藏了！