纯CSS渐变圆形边框答案

【问题标题】：Pure CSS gradient circle border纯CSS渐变圆形边框
【发布时间】：2018-02-12 06:12:55
【问题描述】：

我有这个 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 和 Possible to use border-radius together with a border-image which has a gradient? 但我需要一个中心透明的解决方案，以便通过页面的背景显示

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

【问题讨论】：

标签： css radial-gradients ui-design

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

【讨论】：

【解决方案2】：

您可以使用mask 来实现您要查找的内容。您将需要一个带有透明圆圈的 SVG 文件。这里我使用了来自互联网的图片，但您可以根据自己的需要制作自己的图片：

mask: url(circle.svg);

CodePen（将背景设置为红色以显示透明度）
mask reference
making your own masks

【讨论】：

谢谢，会调查的。虽然目前对该功能的支持很弱：caniuse.com/#search=mask

【解决方案3】：

这是一个纯 CSS 的解决方案，应该可以在所有现代浏览器中正常工作（在 Chrome、Firefox 和 Edge 上测试）

.box {
  --it:20px; /* thickness of inner gradient */
  --ot:10px; /* thickness of outer gradient */
  --s:30%;   /* starting point of inner gradient */

  width:200px;
  display:inline-flex;
  box-sizing:border-box;
  border-radius:50%;
  border:var(--ot) solid transparent;
  background:
      /* inner gradient clipped to the padding area */
      conic-gradient(red,blue,green,red) padding-box,
      /* outer gradient visible on the border area */
      conic-gradient(purple,yellow,orange,purple) border-box;
      
  -webkit-mask:radial-gradient(farthest-side,
    transparent var(--s), 
    #fff   calc(var(--s) + 1px)  
           calc(var(--s) + var(--it)),
    #fff0  calc(var(--s) + var(--it) + 1px) 
           calc(100% - var(--ot)), 
    #fff   calc(100% - var(--ot) + 1px));
}
/* keep the ratio */
.box::before {
  content:"";
  padding-top:100%;
}

body {
  background:pink;
}

<div class="box"></div>
<div class="box" style="--s:5%;--ot:20px;width:150px;"></div>
<div class="box" style="--s:calc(100% - 20px);--it:10px;width:220px;"></div>
<div class="box" style="--s:0%;--it:50%;width:80px;"></div>

我在计算中添加1px 以避免锯齿状边缘。您可以将conic-gradient() 替换为其他类型的渐变甚至图像

【讨论】：