如何在div之类的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创建两个弧的元素使用三角方程来找出弧的终点.因此,如果弧需要更长或更短,它们可以很容易地修改.

使用的梯度大致相当于所提供的梯度,但通过进一步调整颜色停止点可以实现更接近的相似性.

演示:

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背景图像(一个用于边框的左半部分,另一个用于右半部分)具有一个角度,然后用两个白色圆圈(使用创建radial-gradient)覆盖它们以创建与提供的相同的效果有问题.要使顶部透明,可以将整个东西放在一个伪元素中,将它放在父元素上方,然后使用父元素剪切顶部overflow: hidden.

缺点是圆的中心部分需要是纯色(白色或其他).它不能透明.我们可以使用蒙版图像来创建透明中心,但浏览器支持非常低.到目前为止,它仅受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>

注意:可以通过使用val在其答案中使用的相同方法来避免其中一个径向渐变,但是另一个(位于元素上方)无法避免,因为此方法不对左右边界使用常量颜色.它试图模仿有问题的图像,左边和右边也没有恒定的颜色.使用边界实现这样的效果将是艰难的.(这并不是说其他​​答案是错误的/错误的,只是这个答案是不同的).

Answer 2

您可以使用2个不同的背景,一个在底座中以获得渐变,另一个在顶部以覆盖白色.

更改两者的剪辑和原点,可以使基本区域仅显示在边框区域

.test {
    width: 150px;
  height: 150px;
  border-radius: 50%;
  border: solid 10px transparent;
  border-left-color: cyan;
  border-right-color: red;
  background-image: linear-gradient(white, white), 
    linear-gradient(90deg, cyan 20%, blue 50% , magenta 50%, red 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-size: 100% 100%, 100% 50%;
  background-position: center center, center bottom;
  background-repeat: no-repeat;
}

body {
  background-color: yellow;
  }

<div class="test"></div>

另一种选择,使背景可以透明.

我正在使用2个伪元素,剪裁使得它们只使用一半(右侧或左侧),并使用可变阴影来获得效果.

.test {
  width: 430px;
  height: 430px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.test:before, .test:after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  left: 15px;
  top: 15px;
}

.test:before {
  box-shadow: 
   -31px 232px 107px -142px rgb(110, 228, 180),
   -228px -71px 0px -92px #47CFDA,
   -213px 71px 0px -77px rgba(66, 205, 221, 0.948),
   -31px 232px 0px -77px rgb(66, 205, 221);
  clip: rect(0px, 200px, 1000px, -15px);
}

.test:after {
  box-shadow: 42px 256px 107px 108px #D93EB2, 384px 60px 0px 132px #D9386F;
  clip: rect(0px, 450px, 1000px, 200px);
}

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

<div class="test"></div>

哈利回答的身体背景

Answer 3

您应该使用 SVG 来处理这些典型的事情，否则，您可以使用渐变和框阴影（或伪元素）来隐藏渐变的部分内容：

这里有一个例子来给出这个想法（平均且不易维护......）

.circle {
  background-color: #ffffff;
  text-align: ;
  width: 75px;/* update this */
  height: 75px;/* update this */
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  border-style: solid;
  border-width: 30px;
  border-left-color: #39c8e7;
  border-right-color: #39c8e7;
  border-bottom-color: transparent;
  border-top-color: transparent;
  background: linear-gradient(115deg, #39cbe7 40%, black 80%) -10px 60px no-repeat, linear-gradient(-115deg, #39cbe7 40%, black 80%) 40px 60px no-repeat;/* update background-position and whatever else you need */
  background-size: 67%;/* update this */
  box-shadow: inset 0 0 0 200px white;/* update this */
}

<div class="circle"> test</div>