search

Home  >  Article  >  Web Front-end  >  How to set the border color of css picture to gradient color

How to set the border color of css picture to gradient color

青灯夜游
青灯夜游Original
2022-01-20 17:08:294316browse

In CSS, you can use the border-image attribute and linear-gradient() function to set the color of the picture border to a gradient color. The syntax "border: border size solid; border-image: linear-gradient( ...) 1;}".

How to set the border color of css picture to gradient color

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the border-image attribute and linear-gradient() function to set the color of the picture border to a gradient color

  • border-image attribute Used to set the picture border

  • The linear-gradient() function is used to implement linear gradient

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			img{
				 border: 4px solid;
				 border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="How to set the border color of css picture to gradient color" >
	</body>

</html>

How to set the border color of css picture to gradient color

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the border color of css picture to gradient color. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to adjust Chinese text spacing in cssNext article：How to adjust Chinese text spacing in css

Related articles

See more