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

前置知识：border-radius 用法

前言

本篇目标是实现一个椭圆，半椭圆，四分之一椭圆。

一、圆形和椭圆

当我们想实现一个圆形时，通常只要指定 border-radius 为 width/height 的一半就可以了。

当我们指定的border-radius的值超过了 width/height的一半时，我们仍发现可以实现一个圆形，这是因为：

"当任意两个相邻圆角的半径之和超过 border box

的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到他们不会相互重叠为止。"

css 复制代码

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

当然，在我们不确定宽高的情况下，我们也可以用百分比来实现动态的圆形

css 复制代码

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 ，它有两个参数，分别是水平半径和垂直半径。

当水平半径和垂直半径相同时，它的弧度就是圆形的一部分。如果不一样则是椭圆的一部分。

css 复制代码

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

那么四个角，使用border-radius 的实现方式如下，使用 / 来分隔水平和垂直半径。 / 前后其他规则类似

border-radius: 1em/5em;

css 复制代码

/* 等价于：*/

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

那么要实现一个半椭圆就可以分别设置水平半径和垂直半径即可。

设置左上角和右上角的水平半径为宽度的一半。
设置左上角和右上角的垂直半径为高度的全部。

css 复制代码

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;

那么实现一个四分之一椭圆，也是非常简单的。

我们只需要设置左上角的水平和垂直半径占满宽和高即可。

css 复制代码

width: 200px;
height: 200px;

border-top-left-radius: 100%;
/* 等价于 */
border-radius: 100%  0 0 0 / 100%  0 0 0;

小结

该篇主要描述了如何实现了椭圆，半椭圆，四分之一椭圆的方法。

使用百分比实现自适应，设置横纵半径与边同长实现椭圆。

实际上是对 border-radius 的使用方法的详细讲解，我们可以在了解之后实现其他的形状！