2009年10月29日 星期四

IE也能支援的圓角效果



心得及內容摘要


除非用圖片或者一些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);
});






沒有留言: