CSS-свойство `mask-border-outset`
Базовая поддержка Ограниченная доступность
Эта функция не входит в базовый набор, поскольку не работает в некоторых наиболее популярных браузерах.
Свойство mask-border-outset CSS задаёт расстояние, на которое граница маски элемента выступает за его граничный блок.
Синтаксис
/* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* top and bottom | left and right */ mask-border-outset: 1 1.2; /* top | left and right | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 14px 5px; /* Global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: revert; mask-border-outset: revert-layer; mask-border-outset: unset;
Свойству mask-border-outset можно задать одно, два, три или четыре значения. Каждое значение — это <length> или <number>. Отрицательные значения недопустимы.
- Если указано одно значение, оно задаёт одинаковый отступ для всех четырёх сторон.
- Если указаны два значения, первое задаёт отступ для верхней и нижней сторон, второе — для левой и правой.
- Если указаны три значения, первое задаёт отступ для верхней стороны, второе — для левой и правой, третье — для нижней.
- Если указаны четыре значения, отступы задаются для верхней, правой, нижней и левой сторон в таком порядке (по часовой стрелке).
Значения
-
<length> - Размер отступа границы маски, заданный как размерность.
-
<number> - Размер отступа границы маски, заданный как множитель соответствующего значения
border-width.
Формальное определение
| Исходное значение | 0 |
|---|---|
| Применяется к | всем элементам; в SVG — к контейнерным элементам, за исключением элемента <defs>, и ко всем графическим элементам |
| Наследуется | нет |
| Вычисленное значение | как задано, но относительные длины преобразуются в абсолютные |
| Тип анимации | дискретный |
Формальный синтаксис
mask-border-outset =
[ <length> | <number> ]{1,4}
Примеры
Базовое использование
Похоже, это свойство пока нигде не поддерживается. Когда его начнут поддерживать, оно будет использоваться для смещения маски от внутреннего края граничного блока элемента — с его помощью можно будет расположить маску так, чтобы она начиналась не у внутреннего края границы, а где-то посередине.
mask-border-outset: 1rem;
Браузеры на основе Chromium поддерживают устаревшую версию этого свойства — mask-box-image-outset — с префиксом:
-webkit-mask-box-image-outset: 1rem;
Примечание: На странице mask-border приведён работающий пример (с использованием устаревших свойств границы маски с префиксом, поддерживаемых в Chromium), который поможет вам понять эффект.
Спецификации
| Спецификация |
|---|
| CSS Masking Module Level 1 # the-mask-border-outset |
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
mask-border-outset |
1 |
79 |
Нет |
15 |
17.2
3.1
|
18 |
Нет |
14 |
17.2
2
|
1.0 |
4.4 |
17.2
2
|
См. также
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-border-outset
