css实现圆形的四种方法
【摘要】
CSS在网页上生成一个圆形的四种方法
border-radiusSVGclip-pathradial-gradient
# border-radius
是最简单的应用，并且得到了广泛的支持。该border-radius属性还将影响边框，阴影和元素的触摸/单击目标大小。
<div class="circle"></div>...
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;
-
}
效果:
# SVG
SVG可以包含一个
-
<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;
-
}
效果:
# clip-path
剪切路径不会影响元素的布局，这意味着它们不会影响边框，并且可能会隐藏外部阴影
<div class="circle"></div>
-
.circle {
-
background: #456BD9;
-
clip-path: circle(50%);
-
height: 5em;
-
width: 5em;
-
}
效果:
# 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;
-
}
效果:
文章来源: blog.csdn.net，作者：薛定喵君，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/jsxg2009/article/details/115244281
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）