Comment utiliser la propriété CSS border-image-width-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2019-05-30 16:49:25

original

3251 Les gens l'ont consulté

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;

Copier après la connexion

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>

Copier après la connexion

Rendu :

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