CSS3 border-image Property

Exemple

Spécifiez une image comme la frontière autour d'un élément:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Essayez - le vous - même »

Plus "Try it Yourself" exemples ci - dessous.

Définition et utilisation

La propriété border-image permet de spécifier une image pour être utilisé au lieu de la frontière normale autour d'un élément.

La propriété border-image est un raccourci pour définir les -image-source de la frontière , border-image tranche , border-image largeur , frontière-image-emblée et -image-répétition des frontières propriétés.

Les valeurs omises sont définies à leurs valeurs par défaut.

Valeur par défaut:	none 100% 1 0 stretch
Hérité:	no
Animable:	no. Read about animatable
Version:	CSS3
Syntaxe JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.

Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.

Propriété
border-image	16,0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11,0 -o-

Note: Voir le soutien du navigateur individuel pour chaque valeur ci - dessous.

Syntaxe CSS

border-image:source slice width outset repeat|initial|inherit;

propriété valeurs

Valeur	La description	Joue-le
border-image-source	Le chemin de l'image à utiliser en tant que frontière
border-image-slice	Comment découper l'image de la frontière	Joue-le "
border-image-width	La largeur de l'image de bordure
border-image-outset	Le montant par lequel la zone d'image de la frontière se prolonge au-delà de la zone frontalière
border-image-repeat	Que ce soit l'image de la frontière doit être répétée, arrondie ou allongée	Joue-le "
initial	Définit cette propriété à sa valeur par défaut. Lisez à propos initial
inherit	Hérite cette propriété de son élément parent. Lisez à propos de hériteront

Autres exemples

Exemple

Les valeurs de tranche différents changements complètement le look de la frontière:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Essayez - le vous - même »