要把物件邊角變得圓圓潤潤的，首先都會想到border-radius

初學者剛會用的時候只會設定一個值
讓物件變成一個圓形

然後就覺得好厲害發現新大陸(呦齁齁~手舞足蹈狂奔۹(⊙ꇴ⊙)۹)

但後來發現淺啦!!太淺啦!!!

這個屬性能做的不僅僅如此阿，它可以讓物件千變萬化，潛力無窮!

究竟要怎麼使用呢?

今天就來介紹神奇的border-radius~

border-radius

跟border一樣，border-radius其實是一個縮寫
集合了左上、右上、右下、左下

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

所以在設定時

/* 設定一個值 */
border-radius: 四角;

/* 設定兩個值  */
border-radius: [左上 右下] [右上 左下];

/* 設定三個值 */
border-radius: 左上 [右上 左下] 右下;

/* 設定四個值 */
border-radius: 左上 右上 右下 左下;

就可以讓物件產生不同的形狀~

理解原理

它之所以能讓物件變得圓圓潤潤，是因為圓弧的部分是圓或是橢圓的一部分
因此當我設定border-radius:10px;時，就是設定了半徑10px的圓型，取其圓弧部分套用到四個角

設定1到4個值時，我們設定就是"圓的半徑"
這種方式產生的邊角圓弧都是對稱的

但剛剛也有提到，它的圓弧部分也可以是"橢圓"的一部分
那要怎麼變成橢圓形的一部分呢~
開始之前要先回溯來看看它所縮寫的四個屬性
我以border-top-left-radius為例子

/* 設定一個值 */
border-top-left-radius: 10px;
/* 設定兩個值 */
border-top-left-radius: 50px 10px;

當我設定兩個值時，第一個值為橫向半徑、第二個值為縱向半徑
透過設定這兩個值就可以產生橢圓形的圓弧啦~

但假如說我要四個角都想設定不同橢圓的話...難道
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
都分開設定一輪嗎!? (當然這樣子設定比較方便看懂)

燈燈~ 其實border-radius有一個寫法就可以這樣設定囉~
讓我們加上/進去!
套用剛剛設定1~4個值的概念

/* 一個值 */
border-radius: 橫向半徑 / 縱向半徑;
 
/* 兩個值 */ 
               /*-----橫向半徑---------/---縱向半徑----*/ 
border-radius: [左上 右下] [右上 左下] / [左上 右下] [右上 左下];

/* 三個值 */
              /*-----橫向半徑--------/-----縱向半徑-----*/ 
border-radius: 左上 [右上 左下] 右下 / [左上 右下] [右下 左上];

/* 四個值 */						
             /*-----橫向半徑-------/-----縱向半徑-----*/
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下;

/* 一起設定 */
             /*-----橫向半徑---/---縱向半徑--*/
border-radius: 0 100% 100% 0 / 50%;

就可以玩出各種不同的形狀喔XD

codepen實作

用border-radius 畫半圓

理解之後就來考考自己了~
除了用conic-gradient()之外，如果要畫一個半圓該怎麼寫呢?

.思考一秒鐘
..思考兩秒鐘
...思考三秒鐘

直接看解答：

  width: 200px;
  height: 400px;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #faa;

瞧!畫出來了呢~~

再有創意一點
做出半圓之後結合transform:rotate()、z-index層次
這樣就可以畫出不同比例的圓餅圖啦!

codepen實作玩玩看

最後推薦一個好網站
懶得算的時候只要拉一拉就可以產生漂亮的圓弧囉~

https://9elements.github.io/fancy-border-radius/

參考資料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius