CSS3如何實現圓角效果

這篇文章主要介紹了CSS3如何實現圓角效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

 CSS3 圓角

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

CSS3 圓角制作器

瀏覽器支持

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

-webkit- 或 -moz- 前面的數字表示支持該前綴的第一個版本。

CSS3 border-radius 屬性

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

以下為三個實例：

1. 指定背景顏色的元素圓角：

圓角！

2. 指定邊框的元素圓角:

圓角！

3. 指定背景圖片的元素圓角:

圓角！

代碼如下:

實例

#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 個 圓角。

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

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

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

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

• 一個值： 四個圓角值相同

以下為三個實例:

1. 四個值 - border-radius: 15px 50px 30px 5px:

2. 三個值 - border-radius: 15px 50px 30px:

3. 兩個值 - border-radius: 15px 50px:

以下為源代碼:

實例

#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;

}

CSS3 圓角屬性

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3如何實現圓角效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!