一、為文本添加陰影 text-shadow
使用 text-shadow，可以在不使用圖像表示文本的情況下，為段落、標題等元素中的文本添加動態的陰影效果。（有繼承性）
瀏覽器兼容：IE、Chrome、Firefox、Opera、Safari等所有主流瀏覽器都支持 text-shadow 屬性。Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。
語法
text-shadow：h-shadow v-shadow blur color；
比如 :
- #b1{text-shadow:5px 5px #aaa;} 表現效果
- #b2{text-shadow:-6px -6px #ccc;} 表現效果
- #b3{text-shadow:2px 2px 10px #000;} 表現效果
text-shadow的四個值，（前三個值帶長度單位，四個值之間不需逗號分隔）：
- h-shadow 水平陰影的位置，值可以為負數（不可省略）
- v-shadow 垂直陰影的位置，值可以為負數（不可省略）
- blur 模糊的距離（可選）
- color 陰影的顏色（可選）
- none 默認值（text-shadow:none 可以取消文字的陰影效果）
注意：一個元素添加多個陰影樣式，每組屬性之間用逗號分隔，每個陰影有（2~3個）長度值和1 個可選的顏色值進行規定。省略的長度是 0。
實例：添加多個陰影樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3文字陰影</title> <style> #box1{text-shadow: 10px 10px red, 20px 20px #ff0; } </style> </head> <body> <div id="box1">一個元素多個陰影樣式</div> </body> </html>
text-shadow應用
1、 白色文本的陰影效果
#b1{color:white; text-shadow:2px 2px 4px #000;}
2、霓虹燈效果的文本陰影
#b1{text-shadow:0 0 3px #f0f;}
二、為邊框添加陰影 box-shadow
使用 box-shadow 可以為元素本身添加陰影，即向邊框添加一個或多個陰影。（不可繼承）
瀏覽器兼容：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 瀏覽器支持 box-shadow 屬性。如果希望瀏覽器兼容舊的Android、Mobile Safari和Safari瀏覽器，那么box-shadow需要加上-webkit- 廠商前綴。
語法
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow的六個值，如下：
- h-shadow 水平陰影的位置，值可以為負數（不可省略）
- v-shadow 垂直陰影的位置，值可以為負數（不可省略）
- blur 模糊的距離（可選）
- spread 陰影的距離（可選）
- color 陰影的顏色（可選）
- inset 將外部陰影(outset)改成內部陰影（可選）
- none 默認值（box-shadow:none 可以取消邊框的陰影效果）
注釋：可向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 （2~4） 個長度值、1個可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
box-shadow用法
語法 box-shadow: h-shadow v-shadow blur spread color inset; 例如：
- box-shadow:4px 4px 5px 3px #999;
- box-shadow:4px 4px 5px #999;
- box-shadow:-4px -4px 5px #999; h-shadow 和 v-shadow設置為負值時陰影位置改變
- box-shadow:0 0 9px 3px #999;
實例：添加多個陰影樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3邊框陰影</title> <style> #box1{ margin-top: 100px; margin-left:100px; background-color: #fff; width: 100px; height: 100px; box-shadow: 2px 2px 10px red, 5px 5px 20px blue; } </style> </head> <body> <div id="box1"></div> </body> </html>
參考：https://www.cnblogs.com/nyw1983/p/11348568.html