CSS3網頁制作教程:詳解CSS3實現圓角代碼

2024-07-11 09:01:53

字體：大中小

來源：轉載

供稿：網友

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

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

給你一個DIV

CSS3網頁制作教程:詳解CSS3實現圓角代碼

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

CSS3網頁制作教程:詳解CSS3實現圓角代碼

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簡單的實現圓角

上一篇：網頁設計資源分享:國外CSS和javascript教程

下一篇：網頁代碼實例:CSS制作淘寶導航交互的小三角箭頭