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;
}

效果:

# 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;
}

效果:

# 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;
}

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛定喵君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值