CSS border-image-slice ominaisuus

Määrittely ja käyttö

border-image-slice-ominaisuus määrittelee kuvan reunan sisäisen siirtymän.

Katso myös:

CSS3-opas:CSS3 reunat

esimerkki

Määrittelee kuvan reunan sisäisen siirtymän:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS-kieli

border-image-slice: number|%|fill;

Huomautus:Tämä ominaisuus määrittelee kuvan ylä-, oikea-, ala- ja vasemman reunan sisäisen siirtymän, ja kuva jaetaan yhdeksään alueeseen: neljä kulmaa, neljä reunaa ja keskitila. Ellei käytetä avainsanaa fill, keskitilassa oleva kuvan osa heitetään pois. Jos neljäs arvo/prosentti jätetään pois, se on sama kuin toinen arvo. Jos kolmas arvo jätetään pois, se on sama kuin ensimmäinen arvo. Jos toinen arvo jätetään pois, se on sama kuin ensimmäinen arvo.

ominaisuusarvo

arvo kuvaus
number Numerovaranto, joka edustaa kuvan pisteitä (jos se on rasterikuvitus) tai vektoreiden koordinaatteja (jos se on vektorikuvitus).
% Suhteessa kuvan mittoihin prosentteina: kuvan leveys vaikuttaa horisontaaliseen siirtymään, korkeus vaikuttaa vertikaaliseen siirtymään.
fill Pitäisi säilyttää reunan kuvan keskiosa.

Tekninen yksityiskohta

Oletusarvo: 100%
Perintä: ei
Versio: CSS3
JavaScript-kieli: object.style.borderImageSlice="50% 50%"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täyttä ominaisuutta.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

katso border-image ominaisuus。