Explication détaillée de l'utilisation de border-image en style CSS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de border-image en style CSS. Quelles sont les précautions pour utiliser border-image en style CSS. Voici des cas pratiques, jetons un oeil.

border-image-source propertyDéfinir le chemin de l'image de la bordure [aucun | ]

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
}

border-image-slice attribut bordure d'image décalée vers l'intérieur [ La propriété border-image-width

définit la largeur de la bordure de l'image [| | >

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
}

l'attribut border-image-outset définit la quantité de zone d'image de bordure au-delà de la bordure [ | ](1,4)

L'attribut border-image-repeat définit si la bordure de l'image doit être répétée, arrondie ou étirée (1,2)

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
}

Je crois que vous avez lu cet article Vous maîtrisez le méthode de cas.Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
}

Lecture recommandée :

Effet de retournement 3D de Baidu Tieba

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
   border-image-repeat: rounded;
   border-image: url(border.png) 27  rounded;
}

CSS3 pour obtenir un effet de vélo animé

Deux méthodes pour implémenter la barre de progression en CSS3

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!