CSS中环形形状的径向渐变答案

【问题标题】：Radial gradient in shape of ring in CSSCSS中环形形状的径向渐变
【发布时间】：2020-09-08 05:15:47
【问题描述】：

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

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

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

&lt;div&gt;&lt;/div&gt;

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

【问题讨论】：

标签： css radial-gradients

【解决方案1】：

您可以在 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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

这里有一个解决方案，可以准确地为您提供所需厚度的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>

【讨论】：

【解决方案3】：

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

&lt;div&gt;&lt;/div&gt;

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

【讨论】：

【解决方案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>

【讨论】：