3.26 效果 - 圓角

範例：基本語法

HTML

<div class="test_radius">這是 div 的內容</div>

CSS

div.test_radius{
  width: 100px;
  height: 100px;
  border:1px solid red;

  border-radius: 10px; /* 左上、右上、右下、左下，四個角，都會變成 10px 的圓角 */
}

如圖：

繪製原理

以「左上角」為例：

上圖是以 border-top-left-radius 為例，其它還有：

• border-top-left-radius

• border-top-right-radius

• border-bottom-left-radius

• border-bottom-right-radius

各種寫法範例

圓角順序：左上(10px)、右上(20px)、右下(30px)、左下(40px)：

border-radius: 10px 20px 30px 40px;

圓角順序：左上(10px)、右上及左下(20px)、右下(40px)：

border-radius: 10px 20px 40px;

圓角順序：左上及右下(10px)、右上及左下(20px)：

border-radius: 10px 20px;

例：

範例：正方形照片變圓形

直接參考此 codepen ：