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

Свойство CSS CSS сокращённой записи mask-border позволяет создать маску вдоль края рамки элемента.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

Синтаксис

/* source | slice */
mask-border: url("border-mask.png") 25;

/* source | slice | repeat */
mask-border: url("border-mask.png") 25 space;

/* source | slice | width */
mask-border: url("border-mask.png") 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

Значения

<'mask-border-source'>

Исходное изображение. См. mask-border-source.

<'mask-border-slice'>

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

<'mask-border-width'>

Ширина маски рамки. Можно указать до четырёх значений. См. mask-border-width.

<'mask-border-outset'>

Расстояние от маски рамки до внешнего края элемента. Можно указать до четырёх значений. См. mask-border-outset.

<'mask-border-repeat'>

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

<'mask-border-mode'>

Определяет, рассматривается ли исходное изображение как маска яркости или альфа-маска. См. mask-border-mode.

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

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

mask-border = 
  <'mask-border-source'> ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? ||
  <'mask-border-repeat'> ||
  <'mask-border-mode'>

Примеры

Создание маски рамки на основе растрового изображения

В этом примере мы замаскируем рамку элемента узором из ромбов. Источником маски служит файл ".png" размером 90 на 90 пикселей с тремя ромбами по вертикали и горизонтали:

Чтобы размер области совпадал с размером одного ромба, для разрезания изображения на угловые и краевые области мы используем значение 90, делённое на 3, то есть 30. Значение повтора round позволит равномерно подогнать срезы маски, то есть без обрезки и промежутков.

<div class="masked">
  This element is surrounded by a bitmap-based mask border! Pretty neat, isn't
  it?
</div>

.masked {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  -webkit-mask-box-image: url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /          /* slice */
    20px /             /* width */
    1px                /* outset */
    round;             /* repeat */

  mask-border:
    url("https://mdn.github.io/shared-assets/images/examples/mask-border-diamonds.png")
    30 fill /        /* slice */
    20px /           /* width */
    1px              /* outset */
    round;           /* repeat */
}

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

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

См. также

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width