在日常使用 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文档。
长轴距和短轴距
网友评论