Skip to content

不用圖的CSS圓角效果

nifty.jpgCSS 上面要做圓角並不容易,除了等CSS3裏有關圓角支持外,很多開發者都提供了 許多的方法 。而其中,我覺得用 Nifty Corner 很不錯,不用圖片,配合 Javascript 可以做到 Markup 很簡單,將一些 nesting 的 Tag 由 Javascript 來直接處理,而且關掉 Javascript 也不影響太大,只是沒有了圓角而已。

這個方法,使用的是上下各四層的 1px 高的 block,調效好每一層的 Margin,做成一個小小的弧度。所以基本上,是可以加更多層來增加弧度。使用 Javascript 來自動創造這些 block,只需要在頁面載入後再行 Javascript 造知其要在那些地方方加上這些圓角裝飾。這個方法的缺點,就是不可以加上 border。而某些Background Image亦不適合此方法,因為頭頂和尾部都是用同一隻顏色。

不過在Markup上真的如我們常用的一樣就可以,只需要另外再加Onload事件就可以了,值得大家一看!

相關連結:

Jacky19 Mar 05 1:38 am 寫關於網絡

Tags: , , [ 永久連結 | 引用 | 回應 RSS ]

發表回應