Atrybut border-image-slice CSS
- poprzednia strona border-image-repeat
- Następna strona border-image-source
Definicja i użycie
Atrybut border-image-slice określa wewnętrzne przesunięcie obrazu ramki.
Inne źródła:
CSS3 Tutorial:Krawędzie CSS3
Przykład
Określa wewnętrzne przesunięcie obrazu ramki:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
CSS Syntax
border-image-slice: number|%|fill;
Komentarz:Ten atrybut określa wewnętrzny przesuniecie krawędzi obrazu w górę, w prawo, w dół i w lewo, obraz jest dzielony na dziewięć obszarów: cztery rogi, cztery boki oraz środkowy obszar. Jeśli nie użyto słowa kluczowego fill, środkowa część obrazu zostanie odrzucona. Jeśli pominięto czwarty numer lub procent, będzie on taki sam jak drugi. Jeśli pominięto trzeci numer, będzie on taki sam jak pierwszy. Jeśli pominięto drugi numer, będzie on taki sam jak pierwszy.
Wartość atrybutu
| Wartość | Opis |
|---|---|
| number | Liczbowa wartość, reprezentująca piksele (jeśli jest to obraz rastrowy) lub wektorowe współrzędne (jeśli jest to obraz wektorowy). |
| % | Procentowa wartość względem wymiarów obrazu: szerokość wpływa na przesunięcie poziome, a wysokość na przesunięcie pionowe. |
| fill | Zachowuje środkową część obrazu ramki. |
Techniczne szczegóły
| Domyślna wartość: | 100% |
|---|---|
| Inheritance: | nie |
| Wersja: | CSS3 |
| JavaScript Syntax: | object.style.borderImageSlice="50% 50%" |
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Zobacz border-image Atrybut.
- poprzednia strona border-image-repeat
- Następna strona border-image-source
