À propos de l'utilisation de l'attribut border-image en CSS3

Cet article présente principalement l'utilisation détaillée de border-image en CSS3, qui constitue la connaissance de base pour l'apprentissage introductif de CSS3. Les amis qui en ont besoin peuvent s'y référer

Récemment, border-image a été utilisé. dans le projet, je ne connais que son nom mais je ne connais pas son utilisation.

L'effet final est le suivant : et change avec la largeur de la bordure. La partie grise avec sergé dans l'image ci-dessous est border

Regardez d'abord le CSS :

border-width: 40px;   
border-style: solid;   
border-image-source: url('http://das.alipay.net/shulaibao/img/repeat_padding_bg_400px.png');   
border-image-slice: 40;   
border-image-repeat: repeat;   
background: #fff;   
width: 800px;

Tout d'abord, il doit être utilisé avec border If. border n'est aucun, il est également invalide
Il remplace en fait border-style lorsque border-image-source ou border-image n'est pas valide, border-style sera efficace

Comme background, border-. l'image a également une abréviation La syntaxe abrégée de l'écriture

est :

border-image:<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

Comme indiqué ci-dessus, elle contient 5 attributs. La répartition détaillée est la suivante :

Image. adresse : border-image-source, C'est facile à comprendre, qu'il y ait ou non

border-image-source：url('') || none

Tranche d'image : border-image-slice, pas facile à comprendre, est l'essence même de l'obtention de l'effet Ça coupe. la bordure-image-source en 9 parties, communément appelée grille à neuf carrés, 4 coins, 4 bordures, 1 zone médiane

Syntaxe :

[<number> | <percentage>]{1,4} && fill?

border-image-slice : slice /* Syntaxe à une valeur */ Par exemple border-image-slice : 30% ;
border-image-slice : horizontal vertical /* Syntaxe à deux valeurs */ Par exemple border-image-slice : 10% 30%;
border-image- slice : top vertical bottom /* Syntaxe à trois valeurs */ Par exemple border-image-slice : 30 30% 45; left /* Syntaxe à quatre valeurs */ Par exemple border-image -slice: 7 12 14 5;
border-image-slice: … fill /* La valeur de remplissage peut être placée entre n'importe quelle valeur */ Par exemple border-image- slice: 10% fill 7 12;
border- image-slice:herit
La valeur ne peut être écrite que sous forme numérique, en pourcentage (par rapport à la largeur ou à la hauteur de l'image) et en longueur (px, em , etc.) n'est pas autorisé et invalide

Largeur de l'image : border- image-width remplace la largeur de la bordure

L'image est convexe : border-image-outset
Répétition de l'image : border-image-repeat , que l'arrière-plan soit répété, la valeur par défaut est stretch

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

Recommandations associées :

À propos de l'utilisation de l'attribut display:inline-block en CSS

À propos de l'attribut animation en CSS Comment utiliser

CSS utilise position:sticky pour implémenter la mise en page collante

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!