border-image-slice
Укажите, как обрезать изображение границы:
#borderimg {
border-image-slice: 30%;
}
Попробуйте сами »
Определение border-image-slice
CSS свойство border-image-slice
определяет, как нарезать изображение, указанное в border-image-source. Изображение всегда разрезается на девять частей: четыре угла, четыре кромки и середина.
"Средняя" часть рассматривается как полностью прозрачная, если не задано ключевое слово fill.
Совет: Также посмотрите на свойство border-image (сокращенное свойство для настройки всех свойств border-image-*).
Значение по умолчанию: | 100% |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.borderImageSlice="30%" Попробуй |
Поддержка border-image-slice
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Синтаксис border-image-slice
border-image-slice: number|%|fill|initial|inherit;
Примечание: CSS свойство border-image-slice
может принимать от одного до четырех значений. Если четвертое значение опущено, оно совпадает со вторым. Если третье значение также опущено, оно совпадает с первым. Если второе значение также опущено, оно совпадает с первым.
Значения border-image-slice
Значение | Описание | Демонстрация |
---|---|---|
number | Числа представляют собой пиксели для растровых изображений или координаты для векторных изображений | Демо ❯ |
% | Проценты указаны относительно высоты или ширины изображения | Демо ❯ |
fill | Приводит к отображению средней части изображения | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме border-image-slice
CSS Учебник: CSS Границы изображения
CSS Справочник: border-image свойство
CSS Справочник: border-image-outset свойство
CSS Справочник: border-image-repeat свойство
CSS Справочник: border-image-source свойство
CSS Справочник: border-image-width свойство
HTML DOM справочник: borderImageSlice свойство