CSS 上面要做圓角並不容易,除了等CSS3裏有關圓角支持外,很多開發者都提供了 許多的方法 。而其中,我覺得用 Nifty Corner 很不錯,不用圖片,配合 Javascript 可以做到 Markup 很簡單,將一些 nesting 的 Tag 由 Javascript 來直接處理,而且關掉 Javascript 也不影響太大,只是沒有了圓角而已。
這個方法,使用的是上下各四層的 1px 高的 block,調效好每一層的 Margin,做成一個小小的弧度。所以基本上,是可以加更多層來增加弧度。使用 Javascript 來自動創造這些 block,只需要在頁面載入後再行 Javascript 造知其要在那些地方方加上這些圓角裝飾。這個方法的缺點,就是不可以加上 border。而某些Background Image亦不適合此方法,因為頭頂和尾部都是用同一隻顏色。
不過在Markup上真的如我們常用的一樣就可以,只需要另外再加Onload事件就可以了,值得大家一看!
相關連結: