CSS 涉及設計到陰影的相關內容包括三個方面：box-shadow屬性（盒子陰影）、 text-shadow屬性（文本陰影）、drop-shadow濾鏡。 本篇文章旨在詳細介紹和分析三種陰影的具體參數設置和典型用例。
box-shadow屬性（盒子陰影）
向容器div添加陰影屬性，box-shadow屬性可以設置一個或多個下拉陰影的框。注意：box-shadow可以給同一個元素設置多個陰影效果，并用逗號進行分隔。
box-shadow屬性（盒子陰影）語法
box-shadow: h-shadow v-shadow blur spread color inset;
boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負值 |
| v-shadow | 必需的。垂直陰影的位置。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小 |
| color | 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表 |
| inset | 可選。 陰影向內擴散，否則陰影向外擴散。 |
box-shadow屬性（盒子陰影）屬性詳解
基本屬性 | rgba(0，0，0，1.0)
總結：通過上面的屬性演示，基本效果相信大家心里都已經有所收獲。但不知道你發現沒有，我們可以利用shadow屬性實現更多有趣的效果。
- 利用 h-shadow 和 v-shadow 屬性，可以用來模擬盒子的邊框。
- 利用 h-shadow、 v-shadow、 和 spread 屬性，我們可以給盒子的邊框增加不同顏色。
- 結合動畫，利用v-shadow 和inset(內陰影) 可以實現按鈕按下去的效果
- 再想想，還能做出什么更有趣的效果呢？ 浮空？ 跳動？ 閃爍？
box-shadow屬性（盒子陰影）應用案例
總結：通過上面的屬性應用案例，我們知道了可以利用shadow屬性實現更多有趣的效果，那么期待你去實現更多！
- 立體按鈕：利用 h-shadow 屬性，模擬按鈕的立體效果。
- 七彩圓：利用 多重的 spread 屬性，通過調整 spread 數值大小實現了七色圓環套環效果。
- 凹陷按鈕：利用 blur 屬性實現按鈕的外部漸變，利用inset 1像素的白色陰影，實現按鈕頂部的高光線效果。 當鼠標移動到按鈕上，利用 inset 屬性調整了陰影的灰度，以及1像素的按鈕邊框的高光，使按鈕模擬出被按下的凹陷效果。 文字陰影的配合也恰到好處的實現了凹陷的效果。
- 閃爍的圓：利用了 blur屬性 與CSS動畫相結合，實現閃爍發光的效果。這個稍微調整一下，可以用來模擬太陽和月亮的發光效果。
- 進度條：利用inset 1像素的白色陰影，實現進度條頂部的高光線效果，利用inset 5像素的白色陰影，實現按鈕水晶透明的材質效果（上半條高光）。利用inset陰影，模擬進度條灰色背景的凹陷效果
- 浮空卡片：利用陰影效果，實現了卡片的立體感。配合css動畫，使鼠標移動到卡片上時，產生了卡片懸浮起來與投影產生分離的效果。
- 運動的小球：球體本身就是通過內陰影實現的。另外疊加的投影配合動畫的放大縮小，實現了這種看起來球體由遠及近的效果。
- 彩色的花：它是通過多層的彩色陰影疊加和旋轉產生的，也很有趣。
text-shadow屬性（文本陰影）
非常好理解，所見即所得！這個屬性，就是給文本添加陰影效果。注意：?text-shadow屬性連接一個或更多的陰影文本。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為0。- css3 允許一段文字有多層陰影，多層之間用逗號隔開，每一層內，不同參數之間用空格隔開。
text-shadow屬性（文本陰影）語法
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。正負不表示大小，只表示方向。水平向右為正，向左為負，單位是px |
| v-shadow | 必需。垂直陰影的位置。允許負值。正負不表示大小，只表示方向。水平向下為正，向上為負，單位是px |
| blur | 可選。模糊的距離。數值越大陰影越模糊，單位px |
| color | 可選。陰影的顏色。參閱?CSS 顏色值。 |
text-shadow屬性（文本陰影）典型應用
h1{ text-shadow: 2px 2px 5px #ff0000; }
下面是這句代碼的效果：水平方向向右 2 像素，垂直方向 向下2 像素，模糊距離 5 像素，顏色紅色。需要注意的是,? text-shadow 屬性 與 box-shadow屬性不同，不支持spread 屬性，即不可以調節投影擴散的大小。
text-shadow屬性（文本陰影）應用實例
Drop-shadow 濾鏡
Drop-shadow 可以接受的<shadow>參數介紹
drop-shadow濾鏡可以接受 (shadow)屬性除了"inset"關鍵字的其他值。
- <offset-x> <offset-y>(必須) 這是設置陰影偏移量的兩個 <length>值. <offset-x> 設定水平方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。查看<length>可能的單位. 如果兩個值都是0, 則陰影出現在元素正后面 (如果設置了 <blur-radius> and/or <spread-radius>，會有模糊效果).
- <blur-radius> (可選) 這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，默認是0 (則陰影的邊界很銳利).
- <spread-radius> (可選)? 這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
- 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。
- <color> (可選)? ?查看 <color>該值可能的關鍵字和標記。若未設定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
PS： 由于篇幅和時間有限，本例涉及到的有趣的CSS效果代碼，我將在后續幾日的 CSS技巧 文章中發布出來。當然，大家需要哪個代碼，也可以在評論區留言給我。我會優先發出來的。感謝大家持續關注我！謝謝！
