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 定義左下角邊框的形狀。