css - CSS中环形形状的径向渐变

Question

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

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

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

<div></div>

有没有办法在 HTML 和 CSS 中制作它，而不使用画布或 svg（小提琴）。我不能使用图像，因为我想渲染这个形状的不同宽度和厚度。

标签： cssradial-gradients

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>