Maison > interface Web > tutoriel CSS > 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

青灯夜游
Libérer: 2022-01-20 17:08:29
original
4378 Les gens l'ont consulté

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

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

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>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal