带透明端的渐变边框

Question

我有 4 个边界半径为 50% 的 div。他们是圈子。在第二和第三之间，我需要制作带有梯度的车速表。渐变的末端必须是透明的，所有的圆也必须是透明的。

代码。

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
  display: flex;
}

.first-circle {
  height: 400px;
  width: 400px;
  border: 2px solid gray;
}

.second-circle {
  height: 350px;
  width: 350px;
}

.third-circle {
  height: 300px;
  width: 300px;
  border: 29px solid gray;
}

.forth-circle {
  height: 250px;
  width: 250px;
  border: 2px solid gray;
}

<div style="background-color: aqua;" clss="flex-center">
  <div class="first-circle circle flex-center">
    <div class="second-circle circle flex-center">
      <div class="third-circle circle flex-center">
        <div class="forth-circle circle flex-center">
        </div>
      </div>
    </div>
  </div>
</div>

灰色边框最后如何使颜色渐变透明（例如时钟板3小时结束）？

Answer 1

基本上，对于以透明方式结束的事情，您可以使用类似background-image: linear-gradient(to right, red , #ffffff00); 的东西， about the circles check this link