Css border img: border-image-source — CSS&colon; Cascading Style Sheets — Вебджем.рф

Содержание

Свойство border-image | CSS справочник

CSS свойства

Определение и применение

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

border-image-source (none | image | initial | inherit)
border-image-slice (number | % | fill | initial | inherit)
border-image-width (number | % | auto | initial | inherit)
border-image-outset (length | number | initial | inherit)
border-image-repeat (stretch | repeat | round | space | initial | inherit)

В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

Если в объявлении не были указаны значения одного из вышеприведенных свойств, то оно устанавливается в значение по умолчанию.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
border-image	16. 0 4.0 -webkit-	15.0 3.5 -moz-	15 11.0 -o-	6.0 3.1 -webkit-	11.0	12.0

CSS синтаксис:

border-image:"source slice / width / outset / repeat | initial | inherit";
/* Обратите внимание, что если вы добавляете в одно объявление свойства width или outset, то обязательно надо указывать слэш после slice и после этого значения. */
border-image:"url(ramka.png) 350 1-4 value + fill / 10px 1-4 value / 7px 1-4 value/ round 1-2 value";

JavaScript синтаксис:

object.style.borderImage = "url(border.png) 50 stretch"

Значения свойства

Значение	Описание
border-image-source	Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения. Значение по умолчанию none.
border-image-slice	Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source. Значение по умолчанию 100%.
border-image-width	Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы). Значение по умолчанию 1.
border-image-outset	Определяет величину, на которую область границы изображения выходит за пределы блока границы. Значение по умолчанию 0.
border-image-repeat	Определяет, должна ли граница изображения быть повторена, масштабируема или растянута. Значение по умолчанию stretch.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование изображения в качестве границы</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
padding : 50px; /* устанавливаем величину внутреннего отступа элемента */
border : 55px solid transparent; /* прозрачная сплошная граница размером 55px */
border-image : url(ramka. png) 100 round; /* указываем путь к изображению, устанавливаем смещение 100px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<div class = "test">Ваш текст</div>
	</body>
</html>

В этом примере мы используем изображение 800 на 687, которое мы установили в качестве изображения рамки. Кроме того, установили смещение 100px от верхней, правой, нижней и левой кромки изображения и указали, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.

Результат нашего примера:

Пример использования изображения в качестве границы.

Рассмотрим следующий пример в котором мы установим в качестве границы-изображения линейный градиент, повторяющийся линейный градиент и радиальный градиент:

<!DOCTYPE html>
<html>
<head>
<title>Изображение-граница на CSS</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 150px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
border : 10px solid transparent; /* прозрачная сплошная граница размером 10px для все элементов <div> */
margin-right : 20px; /* устанавливаем отступ справа 20px */
}
 . test {
border-image : repeating-linear-gradient( 45deg, red, red 1%, yellow 1%, red 8%) 10; /* устанавливаем повторяющийся линейный градиент, который будет использован в качестве границы-изображения */
}
.test2 {
border-image : linear-gradient(to right, pink , green) 10;; /* устанавливаем линейный градиент, который будет использован в качестве границы-изображения  */
}
.test3 {
border-image : radial-gradient(yellow 50%, green 65%, red 100%) 10; /* устанавливаем круговой градиент, который будет использован в качестве границы-изображения  */
}
.test4 {
border-image : url(img-border.png) 25 stretch; /* указываем путь к изображению, устанавливаем смещение 25px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение будет растянуто на всю длину.  */
}
 .test5 {
border-image : url(img-border.png) 15 round; /* указываем путь к изображению, устанавливаем смещение 15px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.   */
}
</style>
</head>
	<body>
		<p><b>Использование градиентов:</b></p>
		<div class = "test"></div>
		<div class = "test2"></div>
		<div class = "test3"></div>
		<p><b>Использование изображения:</b></p>
		<img src = "img-border.png" alt = "ramka">
		<div class = "test4"></div>
		<div class = "test5"></div>
	</body>
</html>

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

Результат нашего примера:

Пример использования свойства border-image.CSS свойства

border-image | CSS справочник

Поддержка браузерами


12. 0+	11.0+	15.0+	16.0+	15.0+	6.0+

Описание

CSS свойство border-image используется для указания значений таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat в одном объявлении. Данные свойства можно использовать, например для создания красивых кнопок.

Если какое-либо значение было не установлено, то оно будет установлено в значение по умолчанию для соответствующего свойства.

Значение по умолчанию:	none 100% 1 0 stretch
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object. style.borderImage=»url(border.png) 30 30 round»

Синтаксис

border-image: source slice width outset repeat|inherit;

Значения свойства

Значение	Описание
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границ рамки.
border-image-slice	Смещение изображения границы внутрь.
border-image-width	Определяет ширину для изображения-границы.
border-image-outset	Указывается величина, на которую распространяется область изображения-границы за пределы границ элемента.
border-image-repeat	Определяет, как будет отображаться изображение, заданное для рамки: растягиваться, повторяться или масштабироваться.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    div {
      border-width: 15px;
      width: 250px;
      padding: 10px 20px;
    }
    #round {
      border-image: url("border.
  png") 30 30 round;
    }
    #stretch {
      border-image: url("border.png") 30 30 stretch;
    }
  </style>
</head>
<body>

  <div>Изображение повторяется для заполнения всей области.</div>

  <div>Изображение растянуто, чтобы заполнить всю область.</div>

  <p>Здесь исходное изображение, которое используется в качестве границы:</p>
  <img src="border.png">

</body>
</html>

Результат данного примера в окне браузера:

границ изображения-начало — CSS: Каскадные таблицы стилей

CSS-свойство border-image-outset

задает расстояние, на которое изображение границы элемента отстоит от его рамки.

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

 /* значение <длины> */
граница-изображение-начало: 1rem;
/* значение <число> */
граница-изображение-начало: 1,5;
/* сверху и снизу | Лево и право */
граница-изображение-начало: 1 1.2;
/* сверху | влево и вправо | нижний */
граница-изображение-начало: 30px 2 45px;
/* сверху | право | дно | оставил */
граница-изображение-начало: 7px 12px 14px 5px;
/* Глобальные значения */
граница-изображение-начало: наследовать;
граница-изображение-начало: начальный;
граница-изображение-начало: вернуться;
граница-изображение-начало: обратный слой;
граница-изображение-начало: не установлено;

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

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

Значения

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

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

 border-image-outset = 
 [  |  ]{1,4}

Внешнее изображение границы

HTML

 У этого элемента есть начальное изображение границы!

CSS

 #начало {
  ширина: 10рем;
  фон: #cef;
  граница: сплошная 1,4 бэр;
  изображение границы: радиальный градиент (#ff2, #55f) 40;
  граница-изображение-начало: 1,5; /* 1,5 × 1,4 бэр = 2,1 бэр */
  поле: 2,1 бэр;
}

Result

Specification
CSS Backgrounds and Borders Module Level 3 # the-border-image-outset

BCD tables only load in the browser

with JavaScript enabled.

Включите JavaScript для просмотра данных.

Фоны и рамки
Изучение CSS: фоны и границы

Последнее изменение: 21 октября 2022 г. , участниками MDN

Свойство CSS border-image-slice

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Укажите, как разрезать изображение границы:

#borderimg {
border-image-slice: 30%;
}

Попробуйте сами »

Определение и использование

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

"Средняя" часть считается полностью прозрачным, если не задано ключевое слово fill.

Совет: Также обратите внимание на свойство border-image (сокращенное свойство для установки всех свойств border-image-*).

Показать демо ❯

Значение по умолчанию:	100%
По наследству:	нет
Анимация:	№. Читать о анимированном
Версия:	CSS3
Синтаксис JavaScript:	объект .style.borderImageSlice="30%" Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Имущество
рамка-изображение-срез	15,0	11,0	15,0	6,0	15,0

Синтаксис CSS

граница-изображение-срез: число | % |заполнить|начальный|наследовать;

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

Значения свойств

Значение	Описание	Играй
номер	Числа представляют пиксели для растровых изображений или координаты для векторных изображений	Демонстрация ❯
%	Проценты относятся к высоте или ширине изображения	Демонстрация ❯
заполнить	Заставляет отображать среднюю часть изображения	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Изображения границ CSS

Справочник CSS: свойство border-image

Справочник CSS: свойство border-image-outset

Справочник CSS: свойство border-image-repeat

Справочник CSS: свойство border-image-source

Справочник CSS: border-image -width свойство

Ссылка HTML DOM: свойство borderImageSlice

❮ Назад Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник по HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

2 Top 9 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

019 FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Css border img: border-image-source — CSS: Cascading Style Sheets

Свойство border-image | CSS справочник

Определение и применение

Поддержка браузерами

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

border-image | CSS справочник

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

границ изображения-начало — CSS: Каскадные таблицы стилей

Значения

Внешнее изображение границы

HTML

CSS

Result

Свойство CSS border-image-slice

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные примеры

Добавить комментарий Отменить ответ

Рубрики