Свойство CSS `mask-border-slice`

Свойство mask-border-slice CSS делит набор изображений, заданный свойством mask-border-source, на области. Эти области используются для формирования компонентов маскирующей границы элемента.

Синтаксис

/* All sides */
mask-border-slice: 30%;

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

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

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

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

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

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

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

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

Значения

<number>

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

<percentage>

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

fill

Сохраняет центральную область изображения. Её ширина и высота подбираются соответственно по размеру верхней и левой областей изображения.

Описание

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

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

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

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

Формальное определение

Формальный синтаксис

mask-border-slice = 
  <number-percentage>{1,4} fill?

<number-percentage> = 
  <number> |
  <percentage>

Примеры

Основное использование

Свойство mask-border-slice задаёт размер срезов, получаемых из исходного изображения, и используется для создания маски границы.

mask-border-slice: 30 fill;

Браузеры на основе Chromium поддерживают устаревшую версию этого свойства — mask-box-image-slice — с префиксом:

-webkit-mask-box-image-slice: 30 fill;

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

Совместимость с браузерами

См. также

• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width
• Иллюстрированное описание синтаксиса с 1–4 значениями