css - 如何在图像周围做径向线渐变并设置它的百分比？ CSS 或 SVG 或任何东西都可以解决问题

Question

我需要开发下一个样式:

图像周围的渐变具有不同的颜色并且可以是未完成的。

我该怎么做并设置它的百分比？

对于要求代码的人:

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;
}

Answer 1

我相信您需要使用 SVG。这是您可以应用于路径的渐变。您也可以使用 stroke-dasharray 和 stroke-offset 来获得半圆。

 <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

stroke-dashoffset=""是您可以调整以增大或减小圆圈大小的数字。这是有效的，因为你正在创建一条虚线，它有很远的破折号，所以它只显示一个破折号的一部分。如果您偏移该破折号，则可以沿路径移动它。