CSS3 --添加陰影（盒子陰影、文本陰影的使用）

 CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）
CSS3定義了兩種陰影：盒子陰影和文本陰影。其中盒子陰影需要IE9及其更新版本，而文本陰影需要IE10及其更新版本。下面分別介紹兩種陰影的使用：

1，盒子陰影
（1）盒子陰影的屬性是 box-shadow
1
box-shadow:5px 5px 10px gray;
前兩個值分別表示陰影水平方向和垂直方向的偏移量。
第三個值表示模糊距離。最后一個值是陰影顏色。
 
（2）盒子陰影是可以隨着盒子形狀而自動變化的
原文:CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）


（3）如果盒子下面有內容的話，可以使用 rgba() 函數，將陰影顏色設置為半透明的
原文:CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）
1
box-shadow:5px 5px 10px rgba(0,0,0,0.5);

（4）伸展范圍設置
在模糊距離后面還可以添加一個值，表示伸展范圍（spread）。用來增大模糊邊界之前的實心顏色面積。
下面昨天是未設置伸展范圍，右圖設置了：
原文:CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）
1
box-shadow:5px 5px 10px 5px gray;

（5）在顏色后面加上 inset 用來創建內部陰影
原文:CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）
1
box-shadow:5px 5px 10px gray inset;

2，文本陰影 
文本陰影的屬性是 text-shadow。其值順序與盒子陰影有所不同，先要指定顏色，接着才是水平和垂直偏移量，最后是模糊值。
原文:CSS3 - 給div或者文字添加陰影（盒子陰影、文本陰影的使用）
1
text-shadow: gray 10px 10px 7px;