Introduction détaillée à l'attribut border-image en CSS3

Nous savons que l'intention initiale de l'utilisation de l'attribut border-image est de simplifier un travail complexe. Lorsque vous maîtriserez cet attribut, vous constaterez que vous gagnerez considérablement du temps et de l'efficacité en matière de codage. Ensuite, je vais vous apprendre à utiliser border-image.

La bordure de l'élément est irrégulière. À l'heure actuelle, vous devez utiliser le dessin de conception comme arrière-plan de bordure. Par rapport à background-image, border-image a l'avantage d'être plus flexible. Vous pouvez utiliser du code pour contrôler l'étirement et la répétition de. l'arrière-plan de la bordure, afin que vous puissiez créer des effets plus diversifiés

La largeur et la hauteur du bouton sont incertaines. Utilisez border-image pour créer des boutons Vous pouvez utiliser la même image d'arrière-plan pour créer des boutons de différentes largeurs et hauteurs.

analyse des attributs de bordure-image

arrière-plan de bordureimage. Le format est : url("...").

border-image-slice

La distance à laquelle la bordure de l'image est décalée vers l'intérieur. Format : border-image-slice : en haut à droite en bas à gauche. Référez-vous respectivement à la distance entre les quatre lignes coupant l'image de fond en haut, à droite, en bas et à gauche.

La distance accepte des valeurs numériques et des pourcentages. L'unité de valeur par défaut est px, mais px ne peut pas être ajouté après la valeur, sinon ce CSS ne sera pas analysé par le navigateur. L'utilisation est similaire à margin et padding. Ici, nous utilisons des valeurs numériques comme exemples, et il en va de même pour les pourcentages.

border-image-slice : 10 ; /*La distance est de 10 px de haut en bas, à gauche et à droite ;*/

border-image-slice : 10 30 ; 10px en haut et en bas, 30px à gauche et à droite ;* /

border-image-slice : 10 30 20 /*La distance est de 10px en haut, 20px en bas et 30px à gauche et à droite ;*/

border-image-slice: 10 30 20 40; /* La distance est de 10px en haut, 30px à droite, 20px en bas et 40px à gauche */

Les quatre ; Les lignes divisent l'image d'arrière-plan en 9 parties, parmi lesquelles 1, 2, 3, 4, 6, 7, 8, 9. Huit zones seront coupées et utilisées comme bordure de l'image. Si en plus de définir la valeur ou le pourcentage, un ". fill" est ajouté, alors la zone 5 sera utilisée comme arrière-plan pour remplir le contenu de l'élément, tel que :

border-image -slice: 25 11 fill;

Remarque : slice ne le fait pas accepter les valeurs négatives ; si la somme des distances gauche et droite coupées par la tranche est supérieure à la largeur de l'image de fond, les bordures supérieure et inférieure ne seront pas affichées. Si la somme des distances supérieure et inférieure de la tranche est supérieure à la hauteur de l'image de fond, les bordures gauche et droite ne seront pas affichées.

border-image-width

La largeur de la bordure de l'image. Seules les valeurs numériques sont acceptées et les unités ne peuvent pas être ajoutées.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer des effets de particules de feux d'artifice à l'aide de H5

Étapes pour mettre en œuvre l'optimisation et la compression des pages Web HTML

Expérience de développement à l'aide de balises h dans des pages Web

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!