Question

我正试图通过CSS来做到这一点，只是为了娱乐和学习。

您认为仅使用CSS就能实现吗？如果没有的话，你会走什么路？

Answer 1

我很确定您可以使用CSS动画来更改边框颜色。

#image-id {
  border: solid 1vw;
  animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
  0% { border-color: color1 }
  10% { border-color: color2 }
  20% { border-color: color3 }
  30% { border-color: color4 }
  40% { border-color: color5 }
  50% { border-color: color4 }
  30% { border-color: color7 }
  70% { border-color: color8 }
  80% { border-color: color9 }
  90% { border-color: color10 }
  100% { border-color: color11 }
}

<!DOCTYPE html>
<html>
<body>
  <img id="image-id" src="imageurl"></img>
</body>
</html>

这将循环显示11种颜色（用您自己的颜色替换）。

Answer 2

是可以的，您可以使用svg来实现。创建透明的圆，将渐变应用于其笔触，最后使用变换对其进行定位以获得所需的结果。最好的事情是，由于圆是SVG的，所以它们不会被像素化，但问题是这是繁琐的工作，除非需要，否则不值得。因此，实现此目标的最佳方法是使用图像的png格式。

</head>

<body>
		<svg id="c1" height="150" width="400">		  
		  
		  <g transform="translate(20,30)">
		  	<defs>
		  	  <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
		  	    <stop offset="0%" style="stop-color:rgb(0,0,153);stop-opacity:1" />
		  	    <stop offset="100%" style="stop-color:rgb(102,255,51);stop-opacity:1" />
		  	  </linearGradient>
		  	</defs>
		  	<circle cx="50" cy="50" r="50" stroke="url(#grad2)" fill="transparent" />
		  </g>

		   <g>
		   	<defs>
		   	  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
		   	    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
		   	    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
		   	  </linearGradient>
		   	</defs>
		  	<circle  id="c2" cx="50" cy="50" r="50" stroke="url(#grad1)" fill="transparent" />
		  </g>
		</svg>
</body>
</html>

如何用CSS在圆形图像中制作彩虹边框？

2 个答案: