css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法
# border-radius
是最简单的应用，并且得到了广泛的支持。该border-radius属性还将影响边框，阴影和元素的触摸/单击目标大小。
<div class="circle"></div>.circle {
background: #456BD9;
border: 0.1875em solid #0F1C3F;
border-radius: 50%;
box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
height: 5em;
width: 5em;
}效果: <br>
# SVG
SVG可以包含一个元素，该元素的样式可以类似于任何其他路径。它们得到了很好的支持，并且可以进行动画制作，但是与其他技术相比，它们需要更多的标记。为防止视觉上截断形状，请确保圆的半径（加上其笔触宽度的一半，如有）略小于SVG的半径viewBox。
<svg viewBox="0 0 80 80" width="80" height="80">
<circle class="circle" cx="40" cy="40" r="38"/>
</svg>.circle {
fill: #456BD9;
stroke: #0F1C3F;
stroke-width: 0.1875em;
}效果: <br>
# clip-path
剪切路径不会影响元素的布局，这意味着它们不会影响边框，并且可能会隐藏外部阴影
<div class="circle"></div>.circle {
background: #456BD9;
clip-path: circle(50%);
height: 5em;
width: 5em;
}效果: <br>
# radial-gradient
可以使用background-image和radial-gradient在视觉上用圆圈填充元素。任何内容都将位于该形状的顶部，但其布局（包括触摸/点击目标大小）将不受影响。根据浏览器的不同，圆的边缘可能会出现锯齿状或模糊不清。
<div class="circle"></div>.circle {
background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
height: 5em;
width: 5em;
}效果: <br>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录