實作透明邊框

圖片來自3D CSS Box Model | Hicksdesign

本以為看了上面那張詳細圖解後，已經對CSS Box Model瞭若指掌，沒想到今天要做透明邊框的效果時，還是跌股了啊！只好鼻子摸摸，又把這張圖翻來對照，以補強觀念。



根據上圖，當我們設定 border-color:transparent; 時，透明的邊框將穿過透明的padding層，疊在背景之上...等等！透明的圖層疊上任何圖層，看起來都像亞美碟沒有疊啊！=口=

故若欲達成目的， 需利用同為透明的margin作為border角色使用。

margin的大小，即同於border之寬度。margin其餘特性，恰為透明border之設定，無須多餘調校（也沒得校）。

解決完問題，讓我不禁思考：既然邊框最終都將疊上背景，那把邊框設為透明，到底有何用處？

....當padding用吧。囧