CSS中环形径向渐变

Question

我希望用径向渐变创建"环形"图案，且可以指定厚度（以像素为单位）。期望的效果如下图所示：

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

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

<div></div>

是否有办法在HTML和CSS中制作它，而不使用canvas或svg（fiddle）？我不能使用图片，因为我想呈现不同宽度和厚度的形状。

- Michal

Answer 1

你可以在这个网站上玩转CSS径向渐变。

我已经实现了你想要的效果，这里有一个演示。只需调整百分比即可获得所需的输出。

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>

- evilReiko

Answer 2

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

<div></div>

我刚刚使用了一些随机的像素值。根据您的要求进行编辑。这是语法：radial-gradient(颜色 宽度, 颜色 宽度, 颜色 宽度, ...)宽度可以以px、rem、%或任何CSS单位设置。

- Kavindu Pasan Kavithilaka

Answer 3

这里有一个解决方案，可以让你得到你想要的确切的 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>

- Temani Afif

Answer 4

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

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>

- Anthony Gedeon