CSS如何使用锥形渐变和径向渐变绘制并切除圆环？-html教程-PHP中文网

CSS如何使用锥形渐变和径向渐变绘制并切除圆环？

花韻仙語

发布： 2025-03-24 09:08:01

原创

698人浏览过

css如何使用锥形渐变和径向渐变绘制并切除圆环？

CSS巧妙绘制并裁剪圆环

网页设计中，经常需要绘制复杂的图形，例如：如何用CSS绘制一个圆环，并精确裁剪掉一部分，同时保持圆环内部和裁剪区域的透明性？这在需要为其他元素预留空间时尤其常见。

需求分析

我们需要一个可自定义裁剪角度的圆环，圆环内部必须透明，以便容纳其他内容，裁剪区域同样需要透明。角度并非固定为90度，而是可灵活调整。

解决方案：巧用渐变与遮罩

利用CSS的锥形渐变(conic-gradient)和径向渐变(radial-gradient)，可以完美实现这一效果。

锥形渐变构建圆环: conic-gradient 允许我们创建从中心向外辐射的渐变效果，从而轻松绘制圆环，并通过控制角度实现裁剪。

立即学习“前端免费学习笔记（深入）”；
径向渐变作为遮罩: radial-gradient 创建从中心向外渐变的颜色效果，将其作为遮罩(mask)，可以隐藏圆环的特定部分，达到裁剪效果。

代码示例：

.circular-ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #333 0deg,
    #333 270deg,
    transparent 270deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(#000 60%, transparent 61%);
  mask: radial-gradient(#000 60%, transparent 61%);
}

登录后复制

此代码创建了一个200x200像素的圆环。conic-gradient 生成一个270度深灰色圆环，其余部分透明。radial-gradient 则作为遮罩，确保圆环内部和裁剪部分透明。