陰影大家或多或少都用過蔗蹋，用的好的可以到什么程度呢锨天，來看下：
這個(gè)網(wǎng)址打開比較慢，我把它拿了下來缔恳，看這里
汗顏 ＝ ＝宝剖，看來我們要重新認(rèn)識(shí)一下這個(gè)屬性了。
基礎(chǔ)回顧
box-shadow 以逗號(hào)分隔列表來描述一個(gè)或多個(gè)陰影效果歉甚，基弧可以用到任何元素上万细。
如果元素同時(shí)設(shè)置了border-radius ,陰影也會(huì)有陰影效果。
多個(gè)陰影的z-ordering 和 多個(gè)text-shadow 的z-ordering 規(guī)則相同纸泄，即 第一個(gè)陰影在上面赖钞。
語法
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color *
/box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
取值
- inset
默認(rèn)陰影在邊框外。使用inset后聘裁，
陰影在邊框內(nèi)（即使是透明邊框）雪营，背景之上內(nèi)容之下。
<offset-x> ,<offset-y>
這是頭兩個(gè) <length>
值衡便，用來設(shè)置陰影偏移量献起。<offset-x>
設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊镣陕。 <offset-y>
設(shè)置垂直偏移量谴餐，如果是負(fù)值則陰影位于元素上面〈粢郑可用單位請查看 <length> .
如果兩者都是0岂嗓，那么陰影位于元素后面。這時(shí)如果設(shè)置了<blur-radius>
或<spread-radius>
則有模糊效果鹊碍。
- <blur-radius>
這是第三個(gè) <length>
值厌殉。值越大食绿，糊糊面積越大，陰影就越大越淡公罕。 不能為負(fù)值炫欺。默認(rèn)為0，此時(shí)陰影邊緣銳利熏兄。
- <spread-radius>
這是第四個(gè) <length>
值。取正值時(shí)树姨，陰影擴(kuò)大摩桶；取負(fù)值時(shí)，陰影.收縮帽揪。默認(rèn)為0硝清，此時(shí)陰影與元素同樣大。
- <color>
相關(guān)事項(xiàng)查看 <color>
转晰。如果沒有指定芦拿，則由瀏覽器決定——通常是color
的值，不過目前Safari取透明查邢。
正規(guī)語法
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
正文
我們或多或少都用過陰影蔗崎，不論用的怎么樣，好看或是不好看扰藕。
關(guān)于怎么用的好缓苛，我了解的也不多，不多說邓深。
這里主要說的是單邊和雙邊陰影未桥。
很多人都是用三個(gè)值 一個(gè)顏色 來定義陰影，像這樣：
<pre>
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
</pre>
從這一段代碼里我們能得到如下信息：
- 一個(gè)和本體同樣大小的 芥备，黑色半透明的矩形被畫了出來.
- 它向右平平移了2px,向下平移了3px.
- 它的模糊半徑是4px ,(用的是高斯模糊算法 或者相似的算法)冬耿，這意味著從定義的顏色到完全透明，大概有8px的距離.（double the blur radius）
- 具有發(fā)散半徑的矩形 和他它的本體交叉的部分被裁減掉了萌壳，所以看起來是剛好在下面亦镶。不過要注意的是，本體下方是沒有任何陰影的袱瓮。
<pre>
div {
width: 1.6in;
height: 1in;
background: transparent;
box-shadow: 2px 3px 4px black;
}
</pre>
這一點(diǎn)是和text-shadow不同的染乌。
4px的模糊半徑意味著放祟，我們的陰影比本體邑商，在尺寸上大概大了4px帘瞭。
但是我們設(shè)置的偏移量是2px 和3px,這意味著者甲，部分陰影會(huì)從其他邊溢出岸蜗。
確切地講，
上邊是 1px (4px - 3px),
右邊是 6px (4px + 2px),
下邊是 7px (4px + 3px),
左邊是 2px (4px - 2px);
如果我們設(shè)置4px,4px 的偏移量萍桌，就可以隱藏掉上邊 和 左邊的陰影军熏，但是，這樣產(chǎn)生的效果实蔽，不是那么好：
回頭看一看荡碾，我們是要實(shí)現(xiàn)單邊，雙邊陰影的局装，僅僅這樣是不行的坛吁。所以，我們繼續(xù)往下走铐尚。
還記得box-shadow 的第四個(gè)參數(shù)么拨脉，就是模糊半徑之后的那個(gè)參數(shù)，spread-radius宣增，發(fā)散半徑玫膀。
取正值時(shí)，陰影擴(kuò)大爹脾；取負(fù)值時(shí)帖旨，陰影收縮。
默認(rèn)為0灵妨，此時(shí)陰影與元素同樣大解阅。
比如，-5px 的 spread-radius 將會(huì)使陰影的寬高縮小10px(兩側(cè)格減少5px) ;
理論上來說泌霍，如果我們把 spread-radius 的 收斂數(shù)值絕對值 設(shè)置為 和發(fā)散半徑一樣大瓮钥，那我們就不會(huì)再看到任何陰影，我們我們給它設(shè)置x和y的偏移量烹吵。
如圖：
<pre>
div {
width: 1.6in;
height: 1in;
background: #fb3;
box-shadow: 0 0 4px -4px black;
}
</pre>
然后碉熄，我們給它設(shè)置y 的偏移：
<pre>
box-shadow: 0 5px 4px -4px black;
</pre>
這樣我們就實(shí)現(xiàn)了單邊陰影。
相鄰兩邊的陰影
相似的肋拔，雙邊陰影可以這樣實(shí)現(xiàn)：
<pre>
box-shadow: 3px 3px 6px -3px black;
</pre>
相對兩邊的陰影：
<pre>
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
</pre>
＃瀏覽器兼容性
結(jié)語
＝＝
關(guān)于陰影就說這些锈津，希望給大家?guī)硪恍﹩l(fā)，感謝閱讀凉蜂，歡迎交流琼梆。
附參考資料：
