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;
