CSS 圓角
CSS 圓角
使用 CSS border-radius 屬性，您可以為任何元素新增“圓角”。
CSS border-radius 屬性
CSS border-radius 屬性定義了元素角的半徑。
提示：此屬性允許您為元素新增圓角！
以下是三個示例
1. 為具有指定背景顏色的元素設定圓角
圓角！
2. 為帶有邊框的元素設定圓角
圓角！
3. 為帶有背景影像的元素設定圓角
圓角！
程式碼如下
示例
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
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;
}
自己動手試一試 »
提示： border-radius 屬性實際上是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡寫屬性。
CSS border-radius - 指定每個角
border-radius 屬性可以有零到四個值。規則如下：
四個值 - border-radius: 15px 50px 30px 5px; (第一個值應用於左上角，第二個值應用於右上角，第三個值應用於右下角，第四個值應用於左下角)：
三個值 - border-radius: 15px 50px 30px; (第一個值應用於左上角，第二個值應用於右上角和左下角，第三個值應用於右下角)
兩個值 - border-radius: 15px 50px; (第一個值應用於左上角和右下角，第二個值應用於右上角和左下角)
一個值 - border-radius: 15px; (該值應用於所有四個角，它們均等地變圓)
程式碼如下
示例
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
自己動手試一試 »
您也可以建立橢圓形角
示例
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
自己動手試一試 »
CSS 圓角屬性
| 屬性 | 描述 |
|---|---|
| border-radius | 設定所有 border-*-*-radius 屬性的簡寫屬性 |
| border-top-left-radius | 定義左上角邊框的形狀 |
| border-top-right-radius | 定義右上角邊框的形狀 |
| border-bottom-right-radius | 定義右下角邊框的形狀 |
| border-bottom-left-radius | 定義左下角邊框的形狀 |
