前置知識:border-radius 用法
前言
本篇目標是實現一個橢圓,半橢圓,四分之一橢圓。
一、圓形和橢圓
當我們想實現一個圓形時,通常只要指定 border-radius 為 width/height 的一半就可以了。
當我們指定的border-radius的值超過了 width/height的一半時,我們仍發現可以實現一個圓形,這是因為:
“當任意兩個相鄰圓角的半徑之和超過 border box
的尺寸時,用戶代理必須按比例減小各個邊框半徑所使用的值,直到他們不會相互重疊為止。”
width: 200px;
height: 200px;
border-radius: 100px;
當然,在我們不確定寬高的情況下,我們也可以用百分比來實現動態的圓形
border-radius: 50%;
所以,使用百分比可以實現當寬高一致時,是個圓,不一致時是個橢圓。
二、半橢圓
如何實現一個半橢圓,那么首先我們就要了解 border-radius 的全部用法。
該屬性是一個 簡寫屬性,代表了以下四個屬性
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
分別代表從左上角 開始 順時針順序
當然更方便的還是使用 border-radius 這個簡寫,當指定不同個數的值時,會有不同的效果
- 當有4個值時,每個值分別對應左上角,右上角,右下角,左下角 的半徑。
- 當有3個值時,第二個值代表右上角和左下角的值。
- 當有2個值時,第一個值代表左上角和右下角,第二個值代表右上角和左下角。
- 當有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;
那么要實現一個半橢圓就可以分別設置水平半徑和垂直半徑即可。
- 設置左上角和右上角 的水平半徑為寬度的一半。
- 設置左上角和右上角 的垂直半徑為高度的全部。
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 的使用方法的詳細講解,我們可以在了解之后實現其他的形狀!