添加渐变背景颜色和笔触 - CSS

Question

我已经为css类中的一个添加了背景渐变，但它是从笔画中获取颜色，有没有办法制作边框渐变？

＆＃13;

＆＃13;

    .flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
margin-left:160px;
width: 100px;
  
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 70px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
    
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.blue .circle {
stroke: #3c9ee5;
//background:linear-gradient(to right, #e5405e 0%, #e5405e 15%, rgba(46,2014,113,0.8) 30%, rgba(39,174,96,0.3)45%,#3fffa2 60%, #1a9be0 73%, #ba68ed 100%)

}

.percentage {
  fill: #aaa;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

＆＃13;

<div class="flex-wrapper">
  <div class="single-chart">
    <svg viewbox="0 0 36 36" class="circular-chart blue">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle"
        stroke-dasharray="10, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">10%</text>
    </svg>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

所需的渐变边框。

Answer 1

是的，我们可以在笔画中做渐变背景色。这里我使用渐变做了示例代码。

＆＃13;

＆＃13;

@keyframes load {
  0% {
    stroke-dashoffset: 0;
  }
}
.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
}
.progress .bar {
  display: inline-block;
  position: relative;
  text-align: center;
  color: #93a2ac;
  font-family: Lato;
  font-weight: 100;
  margin: 2rem;
}
.progress .bar:after {
  content: attr(data-percent);
  position: absolute;
  width: 100%;
  top: 3.7rem;
  left: 0;
  font-size: 2rem;
  text-align: center;
}
.progress svg {
  width: 10rem;
  height: 10rem;
}
.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 25;
  stroke-dasharray: 629;
  stroke: #fff;
  opacity: 0.9;
  animation: load 10s;
}

＆＃13;

<div class="progress">
   
    <div class="bar" data-name="SVG Skill" data-percent="97%">
        <svg viewBox="-10 -10 220 220">
        <g fill="none" stroke-width="9" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
        </g>
        </svg>
        <svg viewBox="-10 -10 220 220">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"               stroke-dashoffset="610">
          </path>
        </svg>
    </div>

<!--  Defining Angle Gradient Colors  -->
<svg width="0" height="0">
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
    <stop stop-color="#e32a89"/>
    <stop offset="100%" stop-color="#498a98"/>
</linearGradient>
<linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="#498a98"/>
    <stop offset="100%" stop-color="#50eabf"/>
</linearGradient>
<linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
    <stop stop-color="#50eabf"/>
    <stop offset="100%" stop-color="#6b57d9"/>
</linearGradient>
<linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
    <stop stop-color="#6b57d9"/>
    <stop offset="100%" stop-color="#9c787a"/>
</linearGradient>
<linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
    <stop stop-color="#9c787a"/>
    <stop offset="100%" stop-color="#50eabf"/>
</linearGradient>
<linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
    <stop stop-color="#50eabf"/>
    <stop offset="100%" stop-color="#618099"/>
</linearGradient>
</defs>
</svg>

＆＃13;

＆＃13;

＆＃13;