Maison > Article > interface Web > Comment définir la couleur de la bordure de l'image CSS sur une couleur dégradée

Comment définir la couleur de la bordure de l'image CSS sur une couleur dégradée

青灯夜游original: 2022-01-20 17:08:294320parcourir

En CSS, vous pouvez utiliser l'attribut border-image et la fonction Linear-gradient() pour définir la couleur de la bordure de l'image sur une couleur dégradée. La syntaxe "border: border size solid; border-image: Linear-gradient( ...) 1;}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut border-image et la fonction Linear-gradient() pour définir la couleur de la bordure de l'image sur une couleur dégradée

L'attribut border-image est utilisé pour définir la bordure de l'image
La fonction
linear-gradient() est utilisée pour implémenter le dégradé linéaire

Code d'implémentation :

<!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="Comment définir la couleur de la bordure de l'image CSS sur une couleur dégradée" >
	</body>

</html>

Comment définir la couleur de la bordure de limage CSS sur une couleur dégradée

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment ajuster l'espacement du texte chinois en CSSArticle suivant：Comment ajuster l'espacement du texte chinois en CSS

Articles Liés

Voir plus