border-image-source

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

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

Свойство border-image-source CSS задаёт исходное изображение, используемое для создания рамки изображения элемента.

Попробуйте

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

Синтаксис

/* Keyword value */
border-image-source: none;

/* <image> values */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

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

Значения

none: Изображение рамки не используется. Вместо этого отображается внешний вид, определённый свойством border-style.
<image>: Ссылка на изображение, используемое для рамки.

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

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

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

border-image-source = 
  none     |
  <image>  

<image> = 
  <url>       |
  <gradient>  

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

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

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

Примеры

Базовый пример

.box {
  border-image-source: url("image.png");
}

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

Спецификация
Модуль фонов и рамок CSS уровня 3 # the-border-image-source

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border-image-source`	15	12	15	15	6	18	15	14	6	1.0	4.4

См. также

border
outline
box-shadow
background-image
<url> тип
Рамки изображений в CSS: ключевая область фокуса для Interop 2023 в блоге MDN (2023)

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