CSS border-image ominaisuus

Määrittely ja käyttö

border-image-ominaisuus on lyhennetty ominaisuus, joka asettaa seuraavat ominaisuudet:

Jos arvoa ei määritetä, käytetään oletusarvoa.

Vinkki:Käytä border-image-*-ominaisuuksia rakentaaksesi kauniita sopeutuvia painikkeita!

Katso myös:

CSS3 oppitunti:CSS3 reunat

Esimerkki

Määritä kuva kehykseksi, joka ympäröi div-elementin:

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

Kokeile itse!

Sivun alaosassa on lisää esimerkkejä.

CSS syntaksi

border-image: alkuperäinen palikka leveys ulkokehys toistu|alkuperäinen|peritty;

Ominaisuuden arvo

Arvo Kuvaus Testi
border-image-source Käytettävän kuvan polku kehykseen.
border-image-slice Kuvakehyksen sisäinen siirtymä.
border-image-width Kuvakehyksen leveys.
border-image-outset Kuvakehyksen kuva ylittää kehyksen määrän.
border-image-repeat Pitäisikö kuvakehyksen kuva olla toistettu (toistettu), peittävä (pyöreä) vai venytetty (venytetty)? Testi

Tekninen yksityiskohta

Oletusarvo: ei 100% 1 0 stretch
Perinnäisyys: ei
Versio: CSS3
JavaScript syntaksi: object.style.borderImage="url(border.png) 30 30 round"

Lisää esimerkkejä

Border-image painike
Tämä esimerkki näyttää, miten voit luoda painikkeen border-image-ominaisuuden avulla.

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-