CSS揭秘：9.自适应的椭圆

前置知识：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 的使用方法的详细讲解，我们可以在了解之后实现其他的形状！