border-image-outset

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с февраля 2017 года.

Свойство border-image-outset CSS задаёт расстояние, на которое изображение границы элемента смещено от его рамки.

Части изображения границы, которые отображаются за пределами рамки элемента с помощью border-image-outset не вызывают полосы прокрутки и не реагируют на события мыши.

Попробуйте

Синтаксис

/* <length> value */
border-image-outset: 1rem;

/* <number> value */
border-image-outset: 1.5;

/* top and bottom | left and right */
border-image-outset: 1 1.2;

/* top | left and right | bottom */
border-image-outset: 30px 2 45px;

/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;

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

Свойство border-image-outset может быть указано как одно, два, три или четыре значения. Каждое значение — <length> или <number>. Отрицательные значения недопустимы и приведут к игнорированию объявления border-image-outset.

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

Значения

<length>: Размер отступа изображения границы как размер — число с единицей измерения.
<number>: Размер отступа изображения границы как кратное соответствующим border-width элемента. Например, если у элемента border-width: 1em 2px 0 1.5rem, и border-image-outset: 2, конечный border-image-outset будет вычислен как 2em 4px 0 3rem.

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

Начальное значение	`0`
Применяется к	всем элементам, кроме внутренних элементов таблицы, когда `border-collapse` равно `collapse`. Также применяется к `::first-letter`.
Наследуется	нет
Вычисленное значение	как указано, но относительные длины переведены в абсолютные
Тип анимации	по типу вычисленного значения

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

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

Примеры

Смещение изображения границы

HTML

<div id="outset">This element has an outset border image!</div>

CSS

#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
  margin: 2.1rem;
}

Результат

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # the-border-image-outset

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border-image-outset`	15	12	15	15	6	18	15	14	6	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/border-image-outset