Перейти к содержанию

border-image-slice

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

Демо

Процесс нарезки создает всего девять областей: четыре угла, четыре края и среднюю область. Четыре линии среза, установленные на заданном расстоянии от соответствующих сторон, контролируют размер областей.

border-image-slice

На приведенной выше диаграмме показано расположение каждого региона.

  • Зоны 1-4 являются угловыми областями. Каждый из них используется один раз для формирования углов окончательного изображения границы.
  • Зоны 5-8 являются краевыми областями. Они повторяются, масштабируются или иным образом изменяются в окончательном изображении границы, чтобы соответствовать размерам элемента.
  • Зона 9 — средний регион. По умолчанию оно отбрасывается, но используется как фоновое изображение, если задано ключевым словом fill.

Свойства border-image-repeat, border-image-width и border-image-outset определяют, как эти области используются для формирования окончательного изображения границы.

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* All sides */
border-image-slice: 30%;

/* top and bottom | left and right */
border-image-slice: 10% 30%;

/* top | left and right | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5;

/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;

Свойство border-image-slice может быть указано с использованием от одного до четырех значений <number-percentage> для представления положения каждого фрагмента изображения. Отрицательные значения недействительны; значения, превышающие соответствующие размеры, ограничиваются 100%.

  • Когда указана одна позиция, создаются все четыре среза на одинаковом расстоянии от соответствующих сторон.
  • Когда указаны две позиции, первое значение создает срезы, измеряемые сверху и снизу, а второе создает срезы, измеряемые слева и справа.
  • Когда указаны три позиции, первое значение создает срез, измеряемый сверху, второе создает срезы, измеряемые слева и справа, третье создает срез, измеряемый снизу.
  • Когда указаны четыре положения, они создают срезы, измеряемые сверху, справа, снизу и слева в указанном порядке (по часовой стрелке).

Необязательное значение fill, если оно используется, может быть размещено в любом месте объявления.

Значения

Значение по-умолчанию:

1
border-image-slice: 100%;
<number>
Представляет смещение края в пикселях для растровых изображений и координаты для векторных изображений. Для векторных изображений число зависит от размера элемента, а не от размера исходного изображения, поэтому в этих случаях предпочтительнее использовать проценты.
<percentage>
Представляет смещение края в процентах от размера исходного изображения: ширина изображения для смещения по горизонтали, высота для смещения по вертикали.
fill
Сохраняет среднюю область изображения и отображает ее как фоновое изображение, но размещает над фактическим фоном. Его ширина и высота соответствуют верхней и левой областям изображения соответственно.

Спецификации

Поддержка браузерами

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

Пример

В следующем примере показан простой <div> с установленным на нем изображением границы. Исходное изображение для границ выглядит следующим образом:

border-diamonds

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrapper">
    <div></div>
</div>

<ul>
    <li>
        <label for="width"
        >slide to adjust <code>border-width</code></label
        >
        <input type="range" min="10" max="45" id="width" />
        <output id="width-output">30px</output>
    </li>
    <li>
        <label for="slice"
        >slide to adjust
        <code>border-image-slice</code></label
        >
        <input type="range" min="10" max="45" id="slice" />
        <output id="slice-output">30</output>
    </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
.wrapper {
    width: 400px;
    height: 300px;
}

div > div {
    width: 300px;
    height: 200px;
    border-width: 30px;
    border-style: solid;
    border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
    border-image-slice: 30;
    border-image-repeat: round;
}

li {
    display: flex;
    place-content: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const widthSlider = document.getElementById('width');
const sliceSlider = document.getElementById('slice');
const widthOutput = document.getElementById('width-output');
const sliceOutput = document.getElementById('slice-output');
const divElem = document.querySelector('div > div');

widthSlider.addEventListener('input', () => {
    const newValue = `${widthSlider.value}px`;
    divElem.style.borderWidth = newValue;
    widthOutput.textContent = newValue;
});

sliceSlider.addEventListener('input', () => {
    const newValue = sliceSlider.value;
    divElem.style.borderImageSlice = newValue;
    sliceOutput.textContent = newValue;
});

Результат:

Комментарии