CSS 中环形的径向渐变

Question

我想创建具有指定厚度（以像素为单位）和径向渐变的“环形”形状。期望的结果是：

但是，我不知道如何以像素为单位指定厚度并确保颜色从绿色平滑过渡到透明（不被切断）。我目前的状态是：

div {
  background-image: radial-gradient(transparent, green, transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

<div></div>

有什么方法可以在 HTML 和 CSS 中制作它，而不使用 canvas 或 svg (fiddle)。我不能使用图像，因为我想渲染这个形状的不同宽度和厚度。

Answer 1

它不是完美的复制品，但已经足够接近了。诀窍是使用掩码。

div {
  border-radius:50%;
  background:linear-gradient(green, green, green);
  -webkit-mask: radial-gradient(transparent 330px, #000 90px);
          mask: radial-gradient(transparent 330px, #000 90px);
}
div:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>

Answer 2

div {
  background-image: radial-gradient(transparent, transparent 100px, green 150px, transparent 200px, transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

<div></div>

我刚刚使用了一些随机 px 值。根据您的要求编辑它们。这是 Santax：radial-gradient(color width, color width, color width, ...) 宽度可以设置为 px、rem、% 或任何 css 单位。

Answer 3

您可以在此 site 中使用 CSS 径向渐变。

我达到了你想要的，这里是demo。只需调整百分比即可获得所需的输出。

div {
    background: radial-gradient(circle, rgba(0,128,0,0) 50%, rgba(0,128,0,1) 60%, rgba(0,128,0,0) 70%);
    width: 300px;
    height: 300px;
}

<div></div>

Answer 4

这里有一个解决方案，可以精确地为您提供所需的 50px 厚度。你也可以把它变成一个变量来随意调整它：

.box {
  --t:50px;
  
  background:
    radial-gradient(farthest-side,transparent calc(100% - var(--t)), green, transparent 100%);
  display:inline-block;
  height: 250px;
  width: 250px;
}

<div class="box"></div>
<div class="box" style="--t:80px;"></div>
<div class="box" style="--t:100px"></div>

CSS 中环形的径向渐变

Radial gradient in shape of ring in CSS

css

radial-gradients