Свойство border-image-slice указывает браузеру, какие части картинки пойдут на уголки, а какие на стороны (а какая часть будет центральной). На уголки идут 4 части, на стороны идут 4 части и одна часть (центральная) идет на фон элемента (опционально, ключевое слово fill).
Для более подробной информации смотрите свойство border-image.
Синтаксис
С числами и процентами через пробел может стоять ключевое слово fill.
Значения
Значение | Описание |
---|---|
проценты | Проценты рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. |
числа | Числа - это пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. |
fill | Поведение по умолчанию предполагает то, что центральная часть изображения будет отброшена. Для того чтобы задействовать ее, необходимо использовать ключевое слово fill в дополнение к числам или процентам. |
Количество параметров
Смещение может принимать 1, 2, 3 или 4 параметра. Обратите внимание на то, что единицы измерения для смещения не пишутся (например, просто 20, а не 20px). Также можно задавать толщину в %.
Число параметров | Описание |
---|---|
1 | Толщина для всех сторон одновременно. |
2 | 1 2; - 1px для верха и низа, 2px для левой и правой. |
3 | 1 2 3; - 1px для верха, 2px для левой и правой, 3px для низа. |
4 | 1 2 3 4; - 1px для верха, 2px для правой, 3px для низа, 4px для левой. |
Значение по умолчанию: 100%(?).
Пример
Пример
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Смотрите также
-
свойство border-image,
которое является сокращением для границы-картинки -
свойство border-image-source,
которое задает путь к картинке для границы -
свойство border-image-repeat,
которое повторение картинки для границы -
свойство border-image-width,
которое задает размер картинки для границы -
свойство border-image-outset,
которое задает сдвиг картинки для границы