Атрибут border-image-slice в CSS
- предыдущая страница border-image-repeat
- Следующая страница border-image-source
определение и использование
атрибут border-image-slice определяет внутреннее смещение изображения рамки.
смотрите также:
CSS3 учебник:Рамки CSS3
пример
определяет внутреннее смещение изображения рамки:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
CSS синтаксис
border-image-slice: number|%|fill;
комментарий:этот атрибут определяет внутреннее смещение верхнего, правого, нижнего и левого краев изображения, изображение разрезается на девять частей: четыре угла, четыре стороны и центральная область. Если не используется ключевое слово fill, центральная часть изображения будет удалена. Если пропущен четвертый числовой или процентный показатель, он будет равен второму значению. Если пропущен третий показатель, он будет равен первому значению. Если пропущен второй показатель, он будет равен первому значению.
значение атрибута
| значение | описание |
|---|---|
| number | числовое значение, представляющее собой пиксели в изображении (если это растровое изображение) или векторные координаты (если это векторное изображение). |
| % | процентное значение по отношению к размеру изображения: ширина влияет на горизонтальное смещение, высота на вертикальное смещение. |
| fill | сохранить центральную часть изображения рамки. |
технические детали
| по умолчанию: | 100% |
|---|---|
| наследование: | нет |
| версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderImageSlice="50% 50%" |
поддержка браузерами
числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
смотрите также border-image атрибут.
- предыдущая страница border-image-repeat
- Следующая страница border-image-source
