熟悉CSS的同学都知道，使用CSS可以绘制一些图形，在业内有很多这方面的案例，比如使用CSS绘制不同的纹理、CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用，比如我们今天要聊的圆（比如圆形容器，圆形缩略图，圆形按钮）。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话，那么接着阅读下面的内容，你一定会有所收获。

CSS绘制圆的技术方案

在Web中，我们可以使用CSS和SVG等技术手段来绘制圆，大家常见的技术方案主要有：

• CSS的border-radius
• CSS的radial-gradient
• CSS的clip-path的circle()
• CSS的shape-outside的circle()
• SVG的<circle>

上面这些技术方案都可以绘制出圆形，每种技术都有其优缺点。接下来我们来看看这些技术是如何绘制出圆，能运用于什么样的场景等。

CSS的border-radius

在CSS中绘制圆最常见的技术方案应该是border-radius。不过使用border-radius绘制圆有一个前提条件，那就是容器的width和height必须相等，而且半径的值是其width（或height）的50%（设置100%同样等效）。比如下面这个示例：

.circle {
    width: 50vh;
    height: 50vh;
    border-radius: 50%; /*也可以是设置100%*/
    background-color: #2a394f;
}

CSS的border-radius属性绘制圆除了设置50%（或100%）之外还可以设置一个超大值（一般只要大小于容器宽度即可）。该特性用于制作类似药丸形状按钮非常有效，比如：

.button {
    width: 100vh;
    min-height: 25vh;
    border-radius: 100vw;
    background-color: #2a394f;
}

实现类似药丸形状按钮时，如果你不知道按钮高度时，可以设置一个任意大的值，比如100vw，甚至是更大的一个值，这样会更安全。

CSS的border-radius同时也会影响到元素的border，box-shadow以及元素的可触摸（可点击）区域：

上面的示例我们使用的是vh单位（视窗单位），当你改变视窗大小的时候，可以看到圆的大小也随之改变。看上去实现了响应式的圆。其实在CSS中我们还可以利用宽高比的技术方案来实现CSS绘制响应式的圆，只不过需要注意的是宽高比应该采用的1:1的比例。

使用border-radius除了绘制圆形之外，我们还可以绘制椭圆，扇形，半圆等等：