IE也能支援的圓角效果

Rounded Corners in Internet Explorer

心得及內容摘要

除非用圖片或者一些hack方法, 否則ie無法支援圓角形狀的按鈕

下面一篇文章雖有破解的方法，但大多也需要套用js,

這邊有一個很簡單的方法可以破解

首先設定

.round {-moz-border-radius:12px; -webkit-border-radius:12px;}

載入這個 curvycorners  的檔案, Curvycorner允許

-moz-border-radius與-webkit-border-radius這兩個效果在IE也能執行

使用這個檔案的好處是不需要任何的圖片載入,

不僅只有按鈕, 也可以定義一些特定的元素使其有圓角效果

var settings = {

tl: { radius: 12 },

tr: { radius: 12 },

bl: { radius: 12 },

br: { radius: 12 },

antiAlias: true

 

}; 

$$('.round').each(function(rd) {

curvyCorners(settings,rd);

});

Written by David Walsh on Wednesday, October 28, 2009