纯CSS渐变圆边框

Question

我有这个UI要求

目前,我有一个div的工作解决方案(具有固定的高度和宽度以及外部渐变边框的背景图像)和一个伪元素,定位absolute有内边框的背景图像.

.div {
    position: relative;
    width: 254px;
    height: 254px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: url(../img/gradient_border_circle.png) no-repeat 50%;
}
div:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: url(../img/gradient_border_circle_inner.png) no-repeat 50%;
}

但是,我正在寻找一个更优雅的解决方案(纯css或svg渐变？)而不使用背景图像,其中渐变可以缩放而没有像素化.

我已经研究过并且最接近我遇到的是https://codepen.io/nordstromdesign/pen/QNrBRM并且可以使用border-radius和带有渐变的border-image？但我需要一个解决方案,其中心是透明的,以显示页面的背景

更新:理想情况下,我正在寻找在所有现代浏览器中具有相对较好支持的解决方案.

Answer 1

SVG 是建议创建圆形并在其周围绘制渐变轮廓/边框的方法.

SVG有一个circle可用于绘制圆形的元素.可以用纯色,渐变或图案填充和勾勒该形状.

* {box-sizing: border-box;}

body {
  background: linear-gradient(#333, #999);
  text-align: center;
  min-height: 100vh;
  padding-top: 10px;
  margin: 0;
}
svg {vertical-align: top;}

<svg width="210" height="210">
  <defs>
    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0" stop-color="#f5d700" />
      <stop offset="1" stop-color="#0065da" />
    </linearGradient>
    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient>
  </defs>
  <g fill="none">
    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" />
    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" />
  </g>
</svg>