Свойство border-image-slice указывает
браузеру, какие части картинки пойдут на
уголки, а какие на стороны (а какая часть
будет центральной). На уголки идут 4
части, на стороны идут 4 части и одна
часть (центральная) идет на фон элемента
(опционально, ключевое слово fill).
Для более подробной информации смотрите свойство
border-image.
Синтаксис
С числами и процентами через пробел может
стоять ключевое слово fill.
1-го до 4-х чисел | от 1-го до 4-х процентов;
}
<-css->
Значения
| Значение | Описание |
|---|---|
| проценты | Проценты рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. |
| числа | Числа - это пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. |
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%(?).
Пример
0 auto;
}
<-css->
<-shexec->
Пример
<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,
которое задает сдвиг картинки для границы