在背景渐变中切一个洞[重复]答案

【问题标题】：Cut a hole in a background gradient [duplicate]在背景渐变中切一个洞[重复]
【发布时间】：2025-12-27 15:15:13
【问题描述】：

我想在skyblue 所在的元素上挖一个洞，这样我就可以看到背景。我似乎无法弄清楚如何做到这一点。我已经看到它完成了，但我无法使用圆锥梯度复制它。

这是我到目前为止所得到的。我试图制作skyblue transparent，但这只是显示了圆锥梯度。

.container { width: 200px; }
.spinner {
  height: 0px;
  width: 100%;
  padding-bottom: calc(100% - 20px);
  margin: 0;
  background: radial-gradient(circle at center, skyblue 54%, transparent 54.8%),
    conic-gradient(from 0deg at center, transparent 45deg, orange 360deg);
  clip-path: circle(46% at center);
}

<div class="container">
  <div class="spinner"></div>
</div>

我也尝试过使用:after 伪选择器，但没有奏效：

  .spinner:after {
    content: '';
    background: green;
    clip-path: circle(50px at center);
    width: 168px;
    height: 168px;
  }

【问题讨论】：

将 display: 块添加到您的后选择器。
这样做确实使 :after 工作，但它并没有按我预期的方式工作。它只显示颜色，如果我使用透明，它会显示下面的颜色。
我想你可以用developer.mozilla.org/en-US/docs/Web/CSS/clip-path滚动到底部，你会看到一个穿过#cross svg中定义的图像的十字架。您可以定义一个圆形 svg 并这样做。另请参阅*.com/questions/22531861/… 在这里完成

标签： css

【解决方案1】：

我可以通过添加 mask-image 来解决这个问题。

body { background: purple; }
.container { width: 200px; }

.spinner {
  height: 0px;
  width: 100%;
  padding-bottom: calc(100% - 20px);
  margin: 0;
  background: conic-gradient(from 0deg at center, transparent 45deg, orange 360deg);
  clip-path: circle(46% at center);
  -webkit-mask-image: radial-gradient(circle at center, transparent 54%, black 54.8%);
  mask-image: radial-gradient(circle at center, transparent 54%, black 54.8%);
}

<div class="container">
  <div class="spinner"></div>
</div>

【讨论】：