【CSS】实现圆、二分之一、四分之一圆

最近项目重构，其中有个模块涉及到的交互全改了，跟css挂钩的点很多，这里简单做个记录。

要实现圆首先得知道border-radius这个属性，引用MDN上的解释：

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。

简单来说就是边框的四个角是由这个属性控制的。如果边框需要圆角就可以直接设置，比如：

border-radius: 30px;

效果如下：

当然，这四个边的圆角也可以自由组合设置，这里就不一一举例了。

一、圆

width: 100px;
height: 100px;
border-radius: 50%; // 等同于 border-radius: 50px;

效果如图：（宽100px，高100px）

需要注意的一点是，这里的宽高必须一致哦，否则出来的就是一个椭圆了。

就像下面这样：（宽100px，高50px）

二、二分之一圆（半圆）

border-radius是简写属性，其完整的属性如下：

border-radius: 30px;

/* 等价于： */

border-top-left-radius:     30px; // 左上角
border-top-right-radius:    30px; // 右上角
border-bottom-right-radius: 30px; // 右下角
border-bottom-left-radius:  30px; // 左下角

注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

• 上半圆

border-radius: 100px 100px 0 0;
width: 100px;
height: 50px;

效果如图：

• 右半圆

border-radius: 0 50px 50px 0;
width: 50px;
height: 100px;

效果如图：

• 下半圆

border-radius: 0 0 100px 100px;
width: 100px;
height: 50px;

效果如图：

• 左半圆

border-radius: 50px 0 0 50px;
width: 50px;
height: 100px;

效果如图：

三、四分之一圆

在绘制半圆时，我们设置的是两个角，那么，四分之一圆只需设置一个角即可。

• 左上

border-top-left-radius: 50px;
width: 50px;
height: 50px;

效果如图：

• 右上

border-top-right-radius: 50px;
width: 50px;
height: 50px;

效果如图：

• 右下

border-bottom-right-radius: 50px;
width: 50px;
height: 50px;

效果如图：

• 左下

border-bottom-left-radius: 50px;
width: 50px;
height: 50px;

哦啦，本文主要是介绍了几个相对来说比较常见的圆的图形，至于其他的，后面遇到再继续补充吧。