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

CSS свойства

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

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


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


Допускается указать до двух значений для этого свойства. Если указано одно значение, оно применяется на горизонтальных и вертикальных сторонах границы. Если указаны оба значения, то первое применяется к горизонтали, а второе применяется к вертикальным сторонам.

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
border-image-repeatcss315.015.015.06.011.012.0

CSS синтаксис:

border-image-repeat:"stretch | repeat | round | space | initial | inherit";
border-image-repeat: round stretch;

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

JavaScript синтаксис:

object.style.borderImageRepeat = "stretch"

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

ЗначениеОписание
stretchИзображение растягивает на всю область. Это значение по умолчанию.
repeatИзображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано.
roundИзображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать.
spaceИзображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства border-image-repeat</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 70px; /* устанавливаем ширину блока */
margin-right : 10px; /* устанавливаем величину отступа от правого края элемента */
padding : 30px; /* устанавливаем величину внутреннего отступа элемента */
border : 10px solid transparent; /* устанавливаем сплошную прозрачную границу размером 10 пикселей */
border-image-source : url(img-border.png); /* устанавливаем путь к изображению, которое будет использовано в качестве границы */
border-image-width : 30px; /* устанавливаем ширину границы-изображения для всех сторон */
border-image-slice : 30; /* указываем смещение для всех сторон */
}
.test   {border-image-repeat : stretch;}  /* изображение растягивает на всю область (это значение по умолчанию) */
.test2   {border-image-repeat : repeat;}  /* изображение повторяется, чтобы заполнить всю область (пока не заполнит зазор между двумя границами). Если изображение не помещается после повторения на целое число раз, то изображение будет обрезано. */
.test3   {border-image-repeat : round;}  /* изображение должно повторяться, пока не заполнит зазор между двумя границами. Если изображение не помещается после повторения на целое число раз, то изображение будет масштабировано, чтобы соответствовать. */
.test4   {border-image-repeat : space;}  /* изображение повторяется, чтобы заполнить всю область. Если изображение не помещается после повторения на целое число раз, дополнительное пустое пространство распределяется между всеми повторами (плитками). */
</style>
</head>
	<body>
		<p><b>Первоначальное изображение:</b></p>
		<img src = "img-border.png" alt = "ramka"><br>
		<div class = "test">stretch</div>
		<div class = "test2">repeat</div>
		<div class = "test3">round</div>
		<div class = "test4">space</div>
	</body>
</html>

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

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

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

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