有病的人才會去做的東西，我有病
http://chibc.net/demo/purecss/

點連結後可以看到，有個喬巴的圖示出現在畫面上，看原始碼，會發現只有套一個樣式而且不是背景圖。

這個，就是CSS3 裡的box-boxshadow 新功能，其實就是盒模型的陰影，也就是幫元素加上陰影，有了這個樣式之後，就不需要每次要調一點小東西就要開 photoshop了。

除了陰影的方向、內外、距離、顏色、大小之外還可以設定透明度，幾乎就等於 photoshop圖層特效裡的陰影，而且是內陰影和外陰影都有，更誇張的是可以同時設定好幾個陰影只要加上 , 分隔就行了。

語法大約長這樣
box-shadow:inset 1px 2px 3px black;
元素陰影: 內陰影 往右1px 往下2px 模糊3px 黑色;

照這個順序來輸入數值，其中 內外陰影預設是外，沒寫就會自動是外陰影。
模糊預設是0也就是沒有，顏色也是預設黑色，可以用rgb表示 來變更透明度。
可接受負數，如-2px 就是會往右或上方移動的意思，長度單位也是px em 等都接受。

因為是CSS3 所以記得加上 prefix -webkit- , -mos-
然後萬惡的IE就.... 你知道。

詳細的參數可以參考這裡
https://developer.mozilla.org/en-US/docs/CSS/box-shadow

至於我這次畫的喬巴，就是利用可重覆增加陰影的特性，一直一直的增加不同的點....
結果就會變成這個樣子啦~~ 點出來的其實...
也沒什麼實質意義，就有病而已...

==
chibc's blog |純CSS喬巴又來了，css3- boxshadow