如何在图像周围进行径向线渐变并设置其百分比? CSS或SVG或其他任何方法都可以解决问题 [英] 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;
}

推荐答案

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

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

stroke-dashoffset ="是您可以调整以增加或减小圆圈大小的数字.之所以起作用，是因为您正在创建一条虚线，该虚线的破折号相距很远，因此它仅显示一个破折号的一部分.如果您抵消了该破折号，则可以沿路径移动它.

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.

这篇关于如何在图像周围进行径向线渐变并设置其百分比? CSS或SVG或其他任何方法都可以解决问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！