詳解CSS3中圓角的相關知識

CSS3 圓角

使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"。

瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器的版本號碼。

-webkit- 或 -moz- 前面的數字表示支援該首碼的第一個版本。

CSS3 border-radius 屬性

使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"。

代碼如下:

#rcorners1 {    border-radius: 25px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners2 {    border-radius: 25px;    border: 2px solid #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners3 {    border-radius: 25px;    background: url(paper.gif);    background-position: left top;    background-repeat: repeat;    padding: 20px;     width: 200px;    height: 150px; }

CSS3 border-radius - 指定每個圓角

如果你在 border-radius 屬性中只指定一個值，那麼將產生 4 個 圓角。

但是，如果你要在四個角上一一指定，可以使用以下規則：

四個值: 第一個值為左上方，第二個值為右上方，第三個值為右下角，第四個值為左下角。

三個值: 第一個值為左上方, 第二個值為右上方和左下角，第三個值為右下角

兩個值: 第一個值為左上方與右下角，第二個值為右上方與左下角

一個值： 四個圓角值相同

以下為原始碼:

#rcorners4 {    border-radius: 15px 50px 30px 5px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners5 {    border-radius: 15px 50px 30px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners6 {    border-radius: 15px 50px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }

您還可以建立橢圓邊角:

執行個體

#rcorners7 {    border-radius: 50px/15px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners8 {    border-radius: 15px/50px;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px; }#rcorners9 {    border-radius: 50%;    background: #8AC007;    padding: 20px;     width: 200px;    height: 150px;}

【相關推薦】

1. 精選：“php程式員工具箱”V0.1版本下載

2. 免費css線上視頻教程

3. php.cn獨孤九賤（2）－css視頻教程