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;

效果图:

3.特别注意:

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