最近项目重构，其中有个模块涉及到的交互全改了，跟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;
哦啦，本文主要是介绍了几个相对来说比较常见的圆的图形，至于其他的，后面遇到再继续补充吧。