Aujourd'hui, Sister Cui'er va vous expliquer le tutoriel CSS3 - le dernier attribut de la bordure : l'attribut border-image. Cet article présente principalement la définition et l'utilisation de cet attribut, dans l'espoir d'aider les étudiants qui ont besoin d'aide dans le travail de développement front-end.
Regardez un exemple spécifique :
Spécifiez l'image comme bordure entourant l'élément div :
div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }
Support du navigateur :
Internet Explorer 11, Firefox, Opera 15, Chrome et Safari 6 prennent en charge l'attribut border-image.
Safari 5 prend en charge un attribut alternatif -webkit-border-image.
Définition et utilisation :
l'attribut border-image est un attribut raccourci utilisé pour définir les attributs suivants :
border-image-source
border; -image-slice;
border-image-width;
border-image-outset;
border-image-repeat;
si valeur omise , sa valeur par défaut sera définie.
Astuce : utilisez les propriétés border-image-* pour créer de superbes boutons évolutifs !
Valeurs possibles :
Ce qui précède est le contenu de l'attribut CSS3 tutoriel-border-image, plus de contenu connexe Veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !