box-shadow屬性詳解及實作多重邊框

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.特别注意：