border-image-width

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

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

Свойство border-image-width CSS задаёт ширину изображения рамки элемента.

Попробовать

Если значение этого свойства больше, чем border-width элемента, изображение рамки будет простираться за пределы отступа (и/или области содержимого).

Синтаксис

/* Keyword value */
border-image-width: auto;

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

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

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

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

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

Значения

<length-percentage>: Ширина рамки, заданная как <length> или <percentage>. Проценты относятся к ширине области изображения рамки для горизонтальных смещений и к высоте области изображения рамки для вертикальных смещений. Не должно быть отрицательным.
<number>: Ширина рамки, заданная как кратная соответствующей border-width. Не должно быть отрицательным.
auto: Ширина рамки устанавливается равной внутренней ширине или высоте (в зависимости от применения) соответствующего border-image-slice. Если у изображения нет требуемой внутренней размерности, используется соответствующее border-width.

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

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

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

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

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

Примеры

Разбиение изображения границы

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

Square image containing eight circles. The circles in each corner are light purple. The four side circles are blue. The area in the middle, where a ninth circle could fit, is blank.

Таким образом, каждый круг на исходном изображении имеет размер 30 на 30 пикселей.

HTML

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border-image-width`	15 До Chrome 112, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	12 До Edge 112, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	13	15 До Opera 98, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	6	18 До Chrome 112, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	14	14 До Opera 75, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	6	1.0 До Samsung Internet 23.0, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).	4.4 До Chrome 112, абсолютная или процентная ширина изображения границы могла не иметь приоритета над более узкой `border-width` (ошибка 40541033).
`auto`	≤83	12	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83

См. также

© 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-width