How to do radial line gradient around an image and set the % of it? CSS or SVG or anything can solve the problem

问题

I need to develop the next style:

The gradient around the image has diferents colors and can be uncompleted.

How can I do that and set the % of it?

For people that ask for code:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}

.module-border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 3px;
}

.module {
  background: #222;
  color: white;
  padding: 2rem;
}

回答1:

I believe you'll need to use SVGs. Here is a gradient you can apply to a path. You can use stroke-dasharray and stroke-offset to get the semi circle as well.

 <svg height="150" width="150">
  <defs>
    <radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="30" ry="30" stroke="url(#grad1)" stroke-width="10" fill="none" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="840"/>
</svg

The stroke-dashoffset="" is the number you can adjust to increase or decrease the size of the circle. This works because you are creating a dashed line, that has very far apart dashes, so it is only showing part of one dash. If you offset that dash you can move it along the path.

来源：https://stackoverflow.com/questions/58920708/how-to-do-radial-line-gradient-around-an-image-and-set-the-of-it-css-or-svg-o