communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > image de bordure en style CSS

image de bordure en style CSS

高洛峰
Libérer： 2017-02-28 13:49:51
original
1357 Les gens l'ont consulté

l'attribut border-image-source définit le chemin de l'image de bordure [aucun | ]

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
}
Copier après la connexion

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

l'attribut 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;
}
Copier après la connexion

la propriété border-image-outset définit la superficie de la zone d'image de bordure au-delà de la bordure [ |< number> ]( 1,4)

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;
}
Copier après la connexion

l'attribut border-image-repeat définit si la bordure de l'image doit être carrelée ( répété) ou rempli (arrondi) ou étiré (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;
   border-image-outset: 27px 27px 27px 27px;
}
Copier après la connexion

bordure-image dans plus de styles CSS Pour. articles connexes, veuillez faire attention au site Web PHP chinois ! 

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;
}
Copier après la connexion

Étiquettes associées：
css border-image
source：php.cn
Article précédent：Malentendus dans l'utilisation de CSS et HTML Article suivant：La différence entre le nième enfant et le nième de type en CSS3
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Menu déroulant central dans la barre de navigation Utilisez CSS/HTML.navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbar...
Depuis 2024-04-04 18:24:52
0
1
338
Difficulté à positionner les divs Je souhaite positionner un div par rapport aux autres éléments de la page. Voici le CSS in...
Depuis 2024-04-04 12:14:58
0
1
380
Comment vérifier la propriété width du sélecteur de classe CSS ? Un exemple est .label{} Voici mon commentaire sur le code CSS, où j'ai choisi une largeur de 270 pour le .label : ...
Depuis 2024-04-01 17:45:11
0
1
338
Utilisez des ensembles d'images pour implémenter des images d'arrière-plan de secours sans recourir à Javascript Je suis assez nouveau dans le front-end et le CSS. J'essaie d'ajouter une image d'arrière-...
Depuis 2024-03-30 11:00:34
0
1
350
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal