CSS border-image-slice egenskap
- föregående sida border-image-repeat
- Nästa sida border-image-source
Definition och användning
border-image-slice egenskapen specificerar den inre offseten för bildens kant.
Se också:
CSS3-tutorials:CSS3 kant
Exempel
Specificerar den inre offseten för bildens kant:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
CSS-syntaks
border-image-slice: number|%|fill;
Kommentar:Egenskapen specificerar den inre offseten för bilden på toppen, höger, botten och vänster sidan, bilden delas upp i nio områden: fyra hörn, fyra sidor och ett mittområde. Om inte ordet fill används, kastas den mittersta delen av bilden bort. Om den fjärde värdet/percentaget utskrivs, är det lika med det andra värdet. Om det tredje värdet utskrivs, är det lika med det första värdet. Om det andra värdet utskrivs, är det lika med det första värdet.
Egenskapsvärde
| Värde | Beskrivning |
|---|---|
| number | Numeriskt värde, representerar bildens pixlar (om det är en rastbild) eller vektorkoordinater (om det är en vektorbild). |
| % | Procentvärde relativt till bildens storlek: bildens bredd påverkar horisontell offset, höjden påverkar vertikal offset. |
| fill | Behåll mittens delen av kantbilden. |
Tekniska detaljer
| Standardvärde: | 100% |
|---|---|
| Arvsförmåga: | nej |
| Version: | CSS3 |
| JavaScript-syntaks: | object.style.borderImageSlice="50% 50%" |
Webbläsarstöd
Talen i tabellen anger den första webbläsare som fullständigt stöder egenskapen.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
se border-image egenskap.
- föregående sida border-image-repeat
- Nästa sida border-image-source
