box-shadow前言

box-shadow是css3的一個新屬性，用來實現陰影效果，陰影分為內陰影和外陰影兩個效果，可以通過逗號新增多個陰影效果。

box-shadow引數解釋

@1、inset

有inset 則為內陰影，沒有insert則為外陰影，預設為外陰影。

@2、offset-x

橫向陰影的大小，正值陰影在右邊，負值陰影在左邊

@3 offset-y

縱向陰影的大小，...

@4 blur-radius

陰影的模糊程度，值越大，陰影越模糊

@5 spread-radius 陰影的擴大縮小，正值時，陰影擴大，負值時，陰影縮小，預設為0。

示例 右 、 下、模糊、陰影擴大

 box-shadow: 4px 4px 8px 6px #000;
 

效果

外陰影是我們常用的效果，元素看起來像浮於頁面的上層，對於引數顏色，我們也可以考慮透明效果，比如rgba(0,0,0,0.5);

box-shadow: 4px 4px 8px  rgba(0,0,0,0.5);

效果

實現四周陰影

box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);

效果略