border-image-slice

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

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

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

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

/* 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;
border-image-slice: fill 10%;

/* 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 при использовании может быть размещено в любом месте объявления.

<number>

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

<percentage>

Представляет смещение края в процентах от размера исходного изображения: ширина изображения для горизонтальных смещений, высота — для вертикальных.

fill

Сохраняет среднюю область изображения и отображает её как фоновое изображение, но поверх фактического background. Его ширина и высота соответствуют ширине и высоте верхних и левых фрагментов изображения соответственно.

border-image-slice = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

Ромбы имеют ширину 30 пикселей, поэтому установка 30 пикселей как значения для border-width и border-image-slice даст вам полностью и довольно чёткие ромбы в вашей границе:

border-width: 30px;
border-image-slice: 30;

Это значения по умолчанию, которые мы использовали в этом примере. Однако мы также предоставили два ползунка, чтобы позволить вам динамически изменять значения вышеупомянутых двух свойств, что позволит вам оценить их влияние:

border-image-slice Изменяет размер образца изображения, используемого для каждого элемента границы и угла границы (и области содержимого, если используется ключевое слово fill). Изменение этого значения от 30 приводит к тому, что граница выглядит несколько неровной, но может иметь некоторые интересные эффекты.

border-width: Изменяет ширину границы. Размер образца изображения масштабируется для подгонки внутри границы, что означает, что если ширина больше, чем фрагмент, изображение может начать выглядеть несколько пикселизованным (если, конечно, вы не используете SVG-изображение).

HTML

<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>

CSS

.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;
}

JavaScript

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;
});

Результат

• Подробное описание синтаксиса с 1 по 4 значения
• Изображения границ в CSS: ключевой предмет для работы над совместимостью 2023 года в блоге MDN (2023)