CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background)，而且會一定程度上反映element變形過的效果*，加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能－修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...
* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow，而且是chrome在xp上的某些字型部分字會消失，十分靈異。(Update: Chrome 14+已修正 [source])
[Box shadow實戰]
- 高光
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); - 替下了 css transform的element修邊...
box-shadow: 0 0 1px transparent;(webkit限定) - 當然有3D..
3D Tower - 再威一點的是，實物化
3d-box-shadow photoframe (除了照片沒有別的圖了...) - box shadow+text shadow+gradient反光: 有炫光(glare)的3D button
Nothing Insightful • An effect that makes the Crikkket web app unique... - 當border用: Multiple Border (好像見過彩虹版的..)
Multiple Borders with CSS
(不過要注意的是，box-shadow是不包在Box-model內、預設大小也是用content box去算－origin好像是按照border-box...)
(off topic: 都是惡搞border的: Have Fun w/ Borders – Beveled, Pressed, & More!) - 繪圖
1DIV クマ吉 - Mask, 007 style
暗闇に浮かぶ文字
[Text shadow實戰]
- 3D Text
基本: How to Create 3D Text With CSS3 & 3d-text
animated: 3D Text Tower
再立體一點: css isometric text [blog post] - Len Flare 柔光
the new lens flare - Photoshop 靠邊站時間
Letterpress、double stroke
Neon、inset、fire、retro, etc
Blur - Antialias font: 替webfont修邊
Smooth font using CSS3 text-shadow property
webkit這Engine真是令人又愛又恨啊。
