css 带透明度的渐变边框

Question

我有这个项目需要画一个圆。我尝试使用 div 来完成此操作，我给出了一个绘制线性渐变的边框。但是这个边界也需要是透明的。但我似乎无法让它发挥作用。我得到渐变工作。但是我不知道如何给这个边框添加透明度。

这是我此时使用的代码：

.gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  border-radius: 50%;
}

这是我使用上面的边框 CSS:

圆应该是这样的：

Answer 1

使用2个遮罩层结合mask-composite

.gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
  position:relative;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: 
  linear-gradient(45deg,#fff,transparent 80%),
  radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))) content-box;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  border-radius: 50%;
  padding:1px;
}

body {
  background:#f2f2f2;
}

<div class="gradient-circle"></div>

css 带透明度的渐变边框

css gradient border with transparency

css

transparency

gradient

border