## border-radius(圓角半徑)
border-radius是css3中新加入的屬性,用來實現圓角邊框。這個屬性目前不好的一點兒是,各個瀏覽器對它的支持不同,IE9以下尚不支持,Gecko(firefox)和webkit(safari/chrome)等需分別使用私有前綴-moz-和-webkit-。更讓人糾結的是,如果單個角的border-radius屬性的寫法在這兩個瀏覽器的差異更大,你要書寫大量的私有屬性:
~~~
-moz-border-radius-bottom-left: 6px;
-moz-border-radius-top-left: 6px;
-moz-border-radius-top-right: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
~~~
這只是要實現左上角不是圓角,其它三個角都是圓角的情況。所以對于border-radius,強烈建議使用縮寫:
~~~
-moz-border-radius: 0 6px 6px;
-webkit-border-radius: 0 6px 6px;
border-radius: 0 6px 6px;
~~~