css实现圆形的四种方法

您所在的位置：网站首页 › 如何给一个div元素添加圆角样式图片 › css实现圆形的四种方法

css实现圆形的四种方法

2024-07-11 13:28| 来源: 网络整理| 查看: 265

CSS在网页上生成一个圆形的四种方法

border-radiusSVGclip-pathradial-gradient # border-radius

是最简单的应用，并且得到了广泛的支持。该border-radius属性还将影响边框，阴影和元素的触摸/单击目标大小。

.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。

.circle { fill: #456BD9; stroke: #0F1C3F; stroke-width: 0.1875em; }

效果:

# clip-path

剪切路径不会影响元素的布局，这意味着它们不会影响边框，并且可能会隐藏外部阴影

.circle { background: #456BD9; clip-path: circle(50%); height: 5em; width: 5em; }

效果:

# radial-gradient

可以使用background-image和radial-gradient在视觉上用圆圈填充元素。任何内容都将位于该形状的顶部，但其布局(包括触摸/点击目标大小)将不受影响。根据浏览器的不同，圆的边缘可能会出现锯齿状或模糊不清。

.circle { background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%); height: 5em; width: 5em; }

效果:

【本文地址】

css实现圆形的四种方法

css实现圆形的四种方法

今日新闻

推荐新闻