含IE兼容解決方法純CSS3怎么實現圓角效果？實現圓角效果的方法介紹

如今，這種利用CSS制作圓角的技術已經得到了大多數主流瀏覽器的支持，包括Safari，谷歌瀏覽器，IE，Opera和火狐瀏覽器。下面讓我們來看看border-radius的語法，解釋，以及IE是如何支持它的。

語法和說明
在CSS3中用來生成圓角效果的屬性是border-radius.這個屬性跟大家熟知的width等屬性的用法相似：

上面的這句代碼的作用是設置一個元素的四個角的弧度半徑值都為10px 。你也可以對每個角單獨指定：

如果你覺得上面的寫法太復雜，可以使用下面border-radius簡寫的方法：

四個值分別代表的是top-left, top-right, bottom-right, bottom-left四個角。
各瀏覽器對border-radius的支持
因為這種圓角技術是CSS3里出現的，老式瀏覽器或較早期的瀏覽器中用到這個屬性時需要在CSS里添加瀏覽器引擎前綴(vendor prefixes) 。會是{prefix}-border-radius這樣一個樣子，而具體各種瀏覽器引擎前綴是下面這樣的寫法：

【含IE兼容解決方法純CSS3怎么實現圓角效果？實現圓角效果的方法介紹】基本上，你需要對每種瀏覽器引擎做各自的聲明，加上這些討厭的稍微不同的代碼來保證完全支持border-radius 。但是，如果你使用的是最新版的瀏覽器，包括火狐、谷歌、IE等，你不需要使用這些前綴，因為這個技術已經很成熟，在各種最新版的瀏覽器里已經受到了普遍支持。
讓IE支持border-radius
直到IE9才有對border-radius屬性的支持，相信很多Web開發人員和Web應用設計人員都很沮喪。在IE9里，最重要的一個點是使用edge META 標記：

如果你的IE比較老，不支持border-radius，有很多其它的技術可以彌補這個缺陷，我遇到過的最好的一個解決方法是使用一個很小的JavaScript程序包，叫做CurvyCorners 。這個CurvyCorners用javaScript動態的生成很多div標記，用這些div標記來繪出圓角效果，甚至支持消除鋸齒功能。
CurvyCorners的用法很簡單。第一步是在頁面中引入CurvyCorners.js腳本：

CurvyCorners會在DOM元素里尋找具有border-radius屬性的元素，然后依次給它們制作出圓角效果。不需要輔助圖片。你甚至可以設置指定元素的弧度半徑：

我強烈建議你應該指定需要使用圓角的元素，因為讓腳本搜索整個頁面來尋找需要圓角處理的元素是一個很耗CPU的過程，而且這個過程是每個頁面加載時都會執行。
基本的所有瀏覽器都支持CSSborder-radius屬性，包括IE ，火狐，Safari，谷歌瀏覽器和Opera 。這個小小的功能能讓你的頁面表現出完全別樣的效果。