CSS 圓角

CSS 圓角

通過 CSS border-radius 屬性，可以實現任何元素的“圓角”樣式。
CSS border-radius 屬性

CSS border-radius 屬性定義元素角的半徑。

提示：您可以使用此屬性爲元素添加圓角！

這裏有三個例子：

這是代碼：
實例

#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 圓角屬性