mask-border

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых наиболее широко используемых браузерах.

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

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

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

Синтаксис

/* 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-mode`: `alpha` `mask-border-outset`: `0` `mask-border-repeat`: `stretch` `mask-border-slice`: `0` `mask-border-source`: `none` `mask-border-width`: `auto`
Применимо к	всем элементам; в SVG применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Проценты	как каждое из свойств сокращённого свойства: `mask-border-slice`: относятся к размеру изображения маски границы `mask-border-width`: относительно ширины/высоты области изображения маски границы
Вычисленное значение	как каждое из свойств сокращённого свойства: `mask-border-mode`: как указано `mask-border-outset`: как указано, но относительные длины преобразуются в абсолютные длины `mask-border-repeat`: как указано `mask-border-slice`: как указано `mask-border-source`: как указано, но значения `<url>` делаются абсолютными `mask-border-width`: как указано, но относительные длины преобразуются в абсолютные длины
Тип анимации	как каждое из свойств сокращённого свойства: `mask-border-mode`: дискретный `mask-border-outset`: дискретный `mask-border-repeat`: дискретный `mask-border-slice`: дискретный `mask-border-source`: дискретный `mask-border-width`: дискретный
Создаёт контекст стекирования	да

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

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

<mask-border-source> = 
  none     |
  <image>  

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

<mask-border-width> = 
  [ <length-percentage> | <number> | auto ]{1,4}  

<mask-border-outset> = 
  [ <length> | <number> ]{1,4}  

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Примеры

Установка маски границы на основе растрового изображения

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

The image used for the mask examples on this page. The mask is a transparent square with three rows of three diamonds each. The diamonds are a very light, almost white, shade of grey. The middle part between the diamonds is also solid grey. The parts between the outside of the diamonds and the edge of the image are transparent.

Чтобы соответствовать размеру одной диагонали, мы используем значение 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 */
}

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

Спецификация
CSS Masking Module Level 1 # the-mask-border

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-border`	1	79	Нет	15	17.23.1	18	Нет	14	3	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border