CSS 系列-如何画一个半圆？

在日常使用 CSS 的过程中，我们经常会遇到非常多种的需求，例如对话框，画三角形，画半圆，圆角矩形，阴影，图文列表，导航栏，水平居中，垂直居中等等。本人结合学习的过程，对一些常见的 CSS 方法进行一个总结，欢迎指正。

画一个半圆

如何去画一个半圆呢？这是张鑫旭在微博里提到的一个问题，很有可能是他在阅文集团面试前端的一个面试问题。首先 CSS 里并没有直接画圆的属性和函数，不使用canvas 和 svg 。

张鑫旭微博截图

先画一个正圆

我们先从简单的入手，先实现一个正圆。实现一个正圆，我们很容易从从常见的 border-radius 入手，因为圆角矩形的圆角到了极限，就是完全没有直线的矩形，就变成了圆形。

.ct {
  width:300px;
  height: 300px;
  border: 1px red solid;
  padding:0;
  margin:10px;
}

.circle {
  margin:0;
  width: 100%;
  height: 100%;
  background-color: rgb(31,135,217);
  border-radius: 50% ;
}

我们先用一个高宽相等的 div 包裹一个 p 或者是另一个高宽相等的块级元素，然后设置被包裹的元素的背景颜色，宽高，最重要的就是设置边框的圆角半径（border-radius），设置成 50%，就是宽高的 50%，这样我们就得到了四个圆角，圆角半径正好是宽高边的一半，就形成一个正圆。

代码与结果

画一个半圆

那如何画一个半圆呢？将正圆的一半切掉？但是一时间想不起来 CSS 有什么直接的函数可以将图形的一半切掉的属性或者函数。

我们可以利用 border-radius 的原理，将相邻的两个边长的 border-radius 设置成相等，而且半径恰好等于另一边边长的一半。因此，我们首先设置一个宽高为二比一的矩形,conainer 和上面正圆的一样：

.half-circle {

  width: 100%;

  height: 50%;

  color: rgb(31,135,217);

  border-radius: 150px 150px 0 0; /* 设置左上角，右上角，右下角，左下角 的圆角半径分别是 150px ，150px 0px 0px，150px刚好等于宽的一半 */
}

半圆代码与结果

这里我们简化了 border-radius 的值，实际上 border-radius 每个角应该有两个值，一个是长轴距一个是短轴距（如下图），就像椭圆里的 a 和 b，只是日常一般用不到，这里就先不深究了，进一步阅读请转到 MDN文档 或 W3C文档。

长轴距和短轴距