前置知識：border-radius 用法

前言

本篇目標是實現一個橢圓，半橢圓，四分之一橢圓。

一、圓形和橢圓

當我們想實現一個圓形時，通常只要指定 border-radius 為 width/height 的一半就可以了。

當我們指定的border-radius的值超過了 width/height的一半時，我們仍發現可以實現一個圓形，這是因為：

“當任意兩個相鄰圓角的半徑之和超過 border box
的尺寸時，用戶代理必須按比例減小各個邊框半徑所使用的值，直到他們不會相互重疊為止。”

width: 200px;
height: 200px;
border-radius: 100px;

當然，在我們不確定寬高的情況下，我們也可以用百分比來實現動態的圓形

border-radius: 50%;

所以，使用百分比可以實現當寬高一致時，是個圓，不一致時是個橢圓。

二、半橢圓

如何實現一個半橢圓，那么首先我們就要了解 border-radius 的全部用法。

該屬性是一個 簡寫屬性，代表了以下四個屬性

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-right-radius
4. border-bottom-left-radius

分別代表從左上角 開始 順時針順序

當然更方便的還是使用 border-radius 這個簡寫，當指定不同個數的值時，會有不同的效果

1. 當有4個值時，每個值分別對應左上角，右上角，右下角，左下角 的半徑。
2. 當有3個值時，第二個值代表右上角和左下角的值。
3. 當有2個值時，第一個值代表左上角和右下角，第二個值代表右上角和左下角。
4. 當有1個值時，代表所以的角半徑。
   

我們也可以為每個角提供不同的水平和垂直半徑。

先介紹下單獨一個屬性 border-top-left-radius ，它有兩個參數， 分別是水平半徑和垂直半徑。

當水平半徑和垂直半徑相同時，它的弧度就是圓形的一部分。如果不一樣則是橢圓的一部分。

border-top-left-radius: 1em 5em;

那么四個角，使用border-radius 的實現方式如下， 使用 / 來分隔 水平和垂直 半徑。 / 前后其他規則類似
border-radius: 1em/5em;

/* 等價于：*/border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

那么要實現一個半橢圓就可以分別設置水平半徑和垂直半徑即可。

1. 設置左上角和右上角 的水平半徑為寬度的一半。
2. 設置左上角和右上角 的垂直半徑為高度的全部。

width: 200px;
height: 200px;border-top-left-radius: 50% 100%;
border-top-right-radius:  50% 100%;
/* 等價于 */
border-radius: 50% 50% 0 0 / 100% 100% 0 0;

那么實現一個四分之一橢圓，也是非常簡單的。
我們只需要設置左上角的水平和垂直半徑 占滿寬和高即可。

width: 200px;
height: 200px;border-top-left-radius: 100%;
/* 等價于 */
border-radius: 100%  0 0 0 / 100%  0 0 0;

小結

該篇主要描述了如何實現了 橢圓，半橢圓，四分之一橢圓 的方法。
使用百分比實現自適應，設置橫縱半徑與邊同長實現橢圓。
實際上是對 border-radius 的使用方法的詳細講解，我們可以在了解之后實現其他的形狀！