CSS3 border-image Property

Exemplu

Specificați o imagine ca marginea din jurul unui element:

#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;
}

Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

Proprietatea de frontieră imagine vă permite să specificați o imagine pentru a fi utilizată în locul frontierei normale în jurul unui element.

Proprietatea border-imagine este o proprietate prescurtare pentru stabilirea frontierei imagine-sursă , border-image-felie , border-imagine-lățime , border-image-bun început și border-image-repeat proprietăți.

Valorile sunt setate la omise valorile lor implicite.

Valoare implicită:	none 100% 1 0 stretch
Mostenit:	no
Animatable:	no. Read about animatable
Versiune:	CSS3
sintaxa JavaScript:	object .style.borderImage=" url(border.png) 30 round" Try it

Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.

Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.

Proprietate
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6 3.1 -webkit-	15.0 11,0 -o-

Notă: A se vedea sprijin individual de browser pentru fiecare valoare de mai jos.

CSS Sintaxa

border-image: Valori de proprietate

Valoare	Descriere	Joaca-l
border-image-source	Calea către imaginea care urmează să fie folosit ca un chenar
border-image-slice	Cum să felie imaginea de frontieră	Joaca - l »
border-image-width	Lățimea imaginii de frontieră
border-image-outset	Suma cu care zona de frontieră a imaginii se extinde dincolo de caseta de frontieră
border-image-repeat	Dacă imaginea de frontieră ar trebui să fie repetate, rotunjite sau întins	Joaca - l »
initial	Setează această proprietate la valoarea implicită. Citiți despre inițială
inherit	Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc

Mai multe exemple

Exemplu

Valori diferite felie schimba complet aspectul de frontiera:

#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;
}

Încearcă - l singur »