Maison  >  Article  >  interface Web  >  Comment utiliser la propriété CSS border-image-width

Comment utiliser la propriété CSS border-image-width

青灯夜游
青灯夜游original
2019-05-30 16:43:493217parcourir

La propriété CSS border-image-width est utilisée pour spécifier la largeur de la bordure de l'image. Vous pouvez définir 4 valeurs​​(non négatives) pour diviser l'image de la bordure en neuf parties. Ils représentent les distances vers l’intérieur depuis le haut, la droite, le bas et la gauche de la zone.

Comment utiliser la propriété CSS border-image-width

Comment utiliser la propriété CSS border-image-width ?

L'attribut border-image-width spécifie la largeur de la bordure de l'image.

Syntaxe :

border-image-width: number|%|auto;

Valeur de l'attribut :

numéro : Représente le multiple de la largeur de bordure correspondante

% : La taille de la zone de l'image englobante : la zone de la largeur décalée horizontalement, la zone de la hauteur décalée verticalement

auto : Si spécifiée, la largeur est la largeur intrinsèque ou hauteur de la tranche d’image correspondante.

Remarque :

Les 4 valeurs de l'attribut border-image-width sont spécifiées pour diviser l'image de bordure en neuf parties. Ils représentent les distances vers l’intérieur depuis le haut, la droite, le bas et la gauche de la zone.

Identique à la deuxième valeur si la quatrième valeur est omise. Si la troisième valeur est omise, elle est identique à la première valeur. Si la deuxième valeur est omise, elle est identique à la première valeur. Aucune valeur négative n'est autorisée en tant que valeur de largeur d'image de bordure.

Exemple de propriété CSS border-image-width

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div {
				border: 30px solid transparent;
				border-image: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
				border-image-width: auto;
				border-image-repeat: round;
				border-image-slice: 30;
			}
		</style>
	</head>
	<body>
		<div>DIV 使用图像边框</div>
		<p>使用的图片:</p>
		<img  src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="Comment utiliser la propriété CSS border-image-width" >

	</body>

</html>

Rendu :

Comment utiliser la propriété CSS border-image-width

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