html - 如何在类似圆的 div 上创建类似线性渐变的边框底部颜色(参见图像文件)

Question

我想创建一个圆形 div，其边框具有渐变效果，如下图所示。

我怎样才能做到这一点？

这是我卡住的地方:

.circle {
    background-color: #ffffff;
    text-align: ;
    width: 675px;
    height: 675px;
    border-radius: 50%;

    border-style: solid;
    border-width: 30px;
    border-left-color: #39c8e7;
    border-right-color: #39c8e7;
    border-bottom-color: // here I need linear gradient
    border-top-color:    // this need to be transparent
}

Answer 1

使用 SVG:

对于这样的形状，我会推荐 SVG，主要有两个原因 - (1) 使用 SVG 可以很容易地创建圆弧，这意味着顶部部分默认是透明的 (2) SVG 描边(边框)可以是分配了一个渐变。这意味着我们不需要用渐变填充圆弧/圆，然后在其上覆盖一个白色圆圈，这反过来意味着中心部分也可以是透明的。

创建两条弧线的 path 元素使用三 Angular 方程找出弧线的终点。因此，如果弧需要更长或更短，可以轻松修改它们。

使用的渐变与所提供的渐变大致相同，但可以通过进一步调整颜色停止点来实现更接近的相似度。

演示:

div {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
path {
  fill: transparent;
  stroke-width: 4;
}
#left-half {
  stroke: url(#left-border);
}
#right-half {
  stroke: url(#right-border);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, steelblue);
  min-height: 100vh;
}

<div>
  <svg viewBox='0 0 104 104'>
    <linearGradient id='left-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(50,0.5,0.5)'>
      <stop offset="0%" stop-color="rgb(71, 207, 215)" />
      <stop offset="100%" stop-color="rgb(113, 230, 178)" />
    </linearGradient>
    <linearGradient id='right-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(310,0.5,0.5)'>
      <stop offset="0%" stop-color="rgb(217, 63, 177)" />
      <stop offset="100%" stop-color="rgb(217, 56, 111)" />
    </linearGradient>
    <path d='M52,102 A50,50 0 0,1 19.86,13.69' id='left-half' />
    <path d='M52,102 A50,50 0 0,0 84.14,13.69' id='right-half' />
  </svg>
</div>

输出屏幕截图:(添加背景以显示除边框外圆是透明的)

---

使用 CSS:

使用 CSS，您可以使用两个单独的 linear-gradient 背景图像(一个用于边框的左半部分，另一个用于边框的右半部分)，它们有一个 Angular ，然后用两个叠加它们白色圆圈(使用 radial-gradient 创建)创建与所提供的问题相同的效果。要使顶部透明，您可以将整个内容放在一个伪元素中，将其定位在父元素上方一点，然后使用父元素上的 overflow: hidden 剪裁顶部。

缺点是圆的中心部分需要是纯色(白色或其他颜色)。它不可能是透明的。我们可以使用 mask 图像来创建透明中心，但浏览器对它的支持非常低。到目前为止，它仅受支持 WebKit 的浏览器支持。

演示:

div {
  position: relative;
  height: 250px;
  width: 250px;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  top: -20%;
  background: radial-gradient(circle at center, white 64%, transparent 65%), radial-gradient(circle at 50% -50%, white 50%, transparent 51%), linear-gradient(310deg, rgb(113, 230, 178), rgb(71, 207, 215)), linear-gradient(50deg, rgb(217, 63, 177), rgb(217, 56, 111));
  background-size: 100% 100%, 100% 100%, 50% 100%, 50% 100%;
  background-position: left top, left top, left top, right top;
  background-repeat: no-repeat;
  border-radius: 50%;
}

<div></div>

注意:其中一个径向渐变可以通过使用 vals 在他的回答中采用的相同方法来避免，但另一个(位于元素上方)无法避免，因为这种方法不对左右边框使用恒定的颜色。它试图模仿所讨论的图像，该图像在左侧和右侧也没有恒定的颜色。使用边框实现这样的效果将很困难。 (这并不是说其他​​答案不好/错误，只是这个答案不同)。