IE九、 Firefox、Safari, Chrome的CSS3圓角屬性

　　這篇文章主要是記錄一下，微軟最新發布的 IE9 瀏覽器CSS 圓角屬性，如今CSS3已經

　　能夠輕鬆實現跨瀏覽器的圓角效果，包括Firefox高版本，IE9，Safari，Chrome等高端

　　瀏覽器。

　　咱們這樣去定義一個盒子模型：

 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;

　　在Firefox，和Chrome中的效果：

　　其中 -moz-border-radius 是 Firefox 實現圓角的私有屬性，而 -webkit-border-

　　radius是 webkit 內核瀏覽器(如 Safari 和 Chrome)實現圓角的私有屬性。

　　咱們也能夠分別設置4個圓角的屬性值，例如這樣的樣式：

 
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

　　獲得的效果以下圖：

咱們還能夠使用CSS縮寫樣式實現圓角效果，例以下面的代碼：

 
-moz-border-radius: 50px 30px 20px 10px;
-webkit-border-radius:20px 10px 5px 50px;

　　固然咱們也能夠爲盒子模型添加邊框屬性：

 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
border:10px solid #69F;

　　IE 9 沒有使用私有屬性，直接使用 border-radius 定義圓角，border-radius 是定義

四個角都是圓角，若是要具體的一個角，能夠使用下面四個屬性：

 
border-bottom-left-radius:5px
border-bottom-right-radius:5px
border-top-left-radius:5px
border-top-right-radius:5px

　　貌似當圓角數值小於4px時將失效