Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО BORDER-IMAGE-SLICE

Свойство border-image-slice указывает, как нарезать изображение, указанное в border-image-source. Изображение всегда нарезано на девять частей: четыре угла, четыре стороны и середина.

Поддержка браузеров


12+

Синтаксис

border-image-slice: число|проценты|fill|initial|inherit

Значения свойства

Значение	Описание
число	Представляет смещение края в пикселях для растровых изображений или координаты для векторных изображений.
проценты	Представляет смещение края в процентах по отношению к высоте или ширине изображения.
fill	Сохраняет среднюю область изображения и отображает ее как фоновое изображение, но накладывается поверх фактического фона. Его ширина и высота соответствуют размеру верхней и левой областей изображения соответственно.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block"></div>

HTML

.block {
    height: 50px;
    width: 50px;
    margin: 30px;
    background: #f1f1f1;
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(/images/border.png);
    border-image-slice: 30% fill;
    border-image-repeat: round;
    border-image-outset:2;
}

CSS

← Перейти к списку свойств