深入了解box-shadow

box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;

• 陰影類(lèi)型：可選；如省略，默認(rèn)是外陰影；它有且只有一個(gè)值“inset”，表示為內(nèi)陰影；
• x-offset：陰影水平偏移量，它可以是正負(fù)值。如為正值，則陰影在元素的右邊；如其值為負(fù)值，則陰影在元素的左邊；
• y-offset：陰影垂直偏移量，它可以是正負(fù)值。如為正值，則陰影在元素的底部；如其值為負(fù)值時(shí)，則陰影在元素的頂部；
• blur-radius：陰影模糊半徑，可選，它只能是正值。如值為0，則陰影不具有模糊效果；它的值越大，陰影的邊緣就越模糊；
• spread-radius：陰影擴(kuò)展半徑，可選，它可以是正負(fù)值。如為正值，則擴(kuò)大陰影的尺寸；如為負(fù)值，則縮小陰影的尺寸；
• color：陰影顏色，可選，如不設(shè)定顏色，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)取色不一致。（經(jīng)測(cè)試，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推薦省略顏色值。

box-shadow: 5px 4px 4px #000;

1. 以該元素相同的尺寸（border-box的尺寸）和位置，畫(huà)一個(gè)背景色為#000的正方形
2. 把它向右移5px，向下移4px。
3. 使用高斯模糊算法將它進(jìn)行4px的模糊處理。
4. 最后，將原始圖形移到模糊圖形上方，接著將模糊圖形與原始元素的交集部分（也就是原始元素壓在模糊圖形的部分）去除。