DIV CSS 佈局教程網

文章簡介：其實CSS3實現圓角的方法只需要設置一個屬性：border-radius（邊框半徑），只要設置一個值就能同時設置四個圓角的半徑。其實CSS3實現圓角的方法只需要設置一個屬性：border-radius（邊框半徑），只要設置一個值就能同時設置四個圓角的半徑

給你一個DIV



設置他的圓角半徑：border-radius：15px；



border-radius可以同時設置1到4個值。如果設置1個值，表示4個圓角都使用這個值。如果設置2個值，表示左上角和右下角使用第1個值，右上角和左下角使用第2個值。如果設置3個值，表示左上角使用第1個值，右上角和左下角使用第2個值，右下角使用第3個值。如果設置4個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。

border-radius 浏覽器的支持：
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius屬性。

早期版本的Safari和Chrome，支持-webkit-border-radius屬性，早期版本的Firefox支持-moz-border-radius屬性。

目前來看，為了保證兼容性，只需同時設置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;

（注意：border-radius必須放在最後聲明，否則可能會失效。）

另外，早期版本Firefox的單個圓角的語句，與標准語法略有不同。
* -moz-border-radius-topleft（標准語法：border-top-left-radius）
* -moz-border-radius-topright（標准語法：border-top-right-radius）
* -moz-border-radius-bottomleft（標准語法：border-bottom-left-radius）
* -moz-border-radius-bottomright（標准語法：border-bottom-right-radius）

以上就是border-radius簡單的實現圓角