紀錄常用CSS，想到那寫到那，此單元後期會再慢慢歸納。
✎寫在前面：IE在 9 以前的版本不支援shadow屬性。

　　CSS越來越強大了，除了文字陰影 (text-shadow)，還有區塊陰影(box-shadow)，甚至有漸層(Gradient)可玩。所以在搬來Blogger時我忍不住一直用(๑´ڡ`๑)，幸好網誌沒被我玩壞（應該？

　　嫌棄找個陰影參數還要分別文字跟區塊搜尋很麻煩，我認為既然都是陰影，就把他們歸在一起紀錄好了。

（Ps.涉及寬度和高度均可用px、em。）

　　【一】文字陰影（text-shadow）：

文字陰影屬性完整的語法是：
text-shadow: ¹ offset-x ²offset-y ³[blur-radius] ⁴color;
紅色參數是必設，淡紫色的[參數]非必須，可設可不設。
四種參數翻譯成中文即：
1. offset-x ：陰影橫向移動的距離(X)
2. offset-y ：陰影縱向移動的距離(Y)
3. blur-radius ：陰影擴散的範圍半徑
4. color ：陰影顏色

來實作看看。
①正常版：<span style="text-shadow: 8px 8px #ccc;">文字陰影 text-shadow</span>

文字陰影 text-shadow

②反向版：<span style="text-shadow: -8px -8px #ccc;">文字陰影 text-shadow</span>

文字陰影 text-shadow

③模糊版：<span style="text-shadow: 8px 8px 8px #ccc;">文字陰影 text-shadow</span>

文字陰影 text-shadow

④強化版：<span style="text-shadow: 0px 0px 15px yellow, 0px 0px 15px yellow, 
　　　　　0px 0px 15px yellow;">文字陰影 text-shadow</span>
　　　　　❆ 原地擴散陰影，語法重複越多次，陰影疊加，顯示效果更強烈。

文字陰影 text-shadow

　　【二】區塊陰影（box-shadow）：

區塊陰影屬性比較多元，完整的語法是：
box-shadow: ¹[inset] ²offset-x ³offset-y ⁴[blur-radius] ⁵[spread-radius] ⁶color;
紅色參數是必設，淡紫色的[參數]非必須，可設可不設。
六種參數翻譯成中文即：
1. inset ：有設定時表示內陰影
2. offset-x ：橫向陰影寬度(X) ↦
3. offset-y ：縱向陰影高度(Y)  ↧
4. blur-radius ：陰影模糊的範圍半徑
5. spread-radius ：擴散半徑
6. color ：陰影顏色

來實作看看。
①正常版：<span style="box-shadow: 8px 8px #ccc;">區塊陰影 box-shadow</span>

區塊陰影 box-shadow

②反向版：<span style="box-shadow: -8px -8px #ccc;">區塊陰影 box-shadow</span>

區塊陰影 box-shadow

③模糊版：<span style="box-shadow: 8px 8px 8px #ccc;">區塊陰影 box-shadow</span>

區塊陰影 box-shadow

④擴散版：<span style="box-shadow: 8px 8px 8px 4px #ccc;">區塊陰影 box-shadow</span>
　　　　　❆加入spread參數強化陰影

區塊陰影 box-shadow

⑤內凹版：<span style="box-shadow: inset 8px 8px 8px 4px #ccc;">區塊陰影box-
　　　　　shadow</span>

區塊陰影 box-shadow

⑥加深版：<span style="box-shadow: 0px 0px 15px yellow, 0px 0px 15px yellow,  
　　　　　 0px 0px 15px yellow;">區塊陰影 box-shadow</span>
　　　　　❆ 原地擴散區塊陰影，語法重複越多次，陰影疊加，顯示效果更強烈。

區塊陰影 box-shadow

③特殊版：❆ gradient，非區塊陰影，為不規則狀漸層陰影。

✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

以下為各式各樣的 gradient實作，陰影效果非常豐富！
參考實作 ▸ 利用 CSS3 gradient 做出不規則漸層陰影 - By Muki Wu from MUKI space*
漸層說明 ▸ radial-gradient() - By Doyoe from CSS參考手冊
陰影範例 ▸ CSS drop-shadows without images - By Nicolas Gallagher
效果實作 ▸ CSS 3.0 MAKER
直觀資源 ▸Ultimate CSS Gradient Generator
　　　　　A powerful Photoshop-like CSS gradient editor from ColorZilla.

✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

以下是和文字陰影或區塊陰影相關的教學或說明
說明詳細 ▸ 陰影效果及光暈效果的 box-shadow (CSS property) [1*] - By 不惑仔 from 網頁藝術思考
漸層說明 ▸ [CSS3]text-shadow 文字陰影 - By 男丁格爾 from 男丁格爾's 脫殼玩