Maison  >  Article  >  interface Web  >  Comment utiliser l'attribut border-image-width

Comment utiliser l'attribut border-image-width

青灯夜游
青灯夜游original
2019-02-12 15:20:163235parcourir

L'attribut border-image-width est utilisé pour spécifier la largeur de la bordure de l'image ; vous pouvez définir 4 valeurs pour diviser la zone de l'image de la bordure en neuf parties du décalage, qui représentent le haut, la droite, le bas, à gauche et des deux côtés Distance vers l'intérieur.

Comment utiliser l'attribut border-image-width

Propriété CSS3 border-image-width

Fonction : Spécifie le image La largeur de la bordure.

Syntaxe :

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

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

% : La taille de la zone de l'image de la bordure de référence - la hauteur de la zone affecte le décalage horizontal et la largeur affecte le décalage vertical.

auto : Si cet attribut est spécifié, la largeur est la largeur inhérente de la tranche d'image correspondante.

Description : Les quatre valeurs de l'attribut border-image-width spécifient le décalage qui divise 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. Si la quatrième valeur est omise, elle est identique à la deuxième valeur. 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 comme valeur de largeur d'image de bordure.

Remarque : Internet Explorer 10 et versions antérieures, Opera, Safari 5 et versions antérieures ne prennent pas en charge l'attribut border-image-width.

Exemple d'utilisation de la propriété CSS3 border-image-width

div
{
border-image-source: url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg);
border-image-width: 30 30;
}

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