聊聊CSS中的圆

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

CSS绘制圆的技术方案

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

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

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

CSS的border-radius

在CSS中绘制圆最常见的技术方案应该是border-radius。不过使用border-radius绘制圆有一个前提条件,那就是容器的widthheight必须相等,而且半径的值是其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同时也会影响到元素的borderbox-shadow以及元素的可触摸(可点击)区域:

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

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-circle.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部