CSS3 的陰影效果 box-shadow 與 text-shadow

CSS3 開始有了這個屬性後，就不用再仰賴繪圖軟體也能製作陰影效果，在製作 UI 上變得有彈性許多，而陰影效果又分為 box-shadow 和 text-shadow，來看一下基本的設定：

CSS3的box-shadow屬性如下：
box-shadow:陰影類型 水平位移 垂直位移 陰影半徑 陰影擴展 陰影顏色

顏色可以用顏色的敘述，如上的16進位顏色碼，或是使用RGB都可以。

box-shadow:2px 2px 10px #06C ;

使用RGB可以多帶一個Alpha值的屬性設定透明度。

box-shadow: 0 0 10px rgba(0, 255, 0, .6);

如果增加擴展屬性，可以讓陰影更強烈一點。

box-shadow: 0 0 10px 5px rgba(0, 255, 0, .6);

陰影類型預設是向外，如果想要製作內陰影，只要再設定陰影屬性就可以了。

box-shadow: inset 0 0 10px #000000;

另外加了, 可以使用多重陰影，比如：

box-shadow: 10px 0 5px red, -10px 0 5px orange, 0 10px 5px green;

內陰影也可以使用：

box-shadow: 0 0 10px inset orange, 0 0 20px inset red, 0 0 10px  orange;

多重陰影的話，寫在前面的會蓋掉後面的，需注意撰寫的順序。

文字陰影的話則是使用 text-shadow，跟 box-shadow 類似只是差在沒有 spread 和 inset 的值可以設定。

text-shadow: 0 0 5px #333;

一樣可以使用多重陰影，也要注意順序：

text-shadow: 0 0 2px #fff, 0 0 4px red, 0 0 12px pink;