Propriété CSS3 tutoriel-border-image

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 (www.php.cn) !