Изображения для границ

Internet Explorer 11 поддерживает определение пользовательских изображений для границ с помощью свойства border-image из спецификации CSS Backgrounds and Borders Module Level 3 консорциума W3C. С помощью свойства border-image вы можете определить для границ собственные изображения вместо классических стилей.

Свойство border-image

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

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? /<border-image-outset> ] ? || <border-image-repeat>

СвойствоОписание

border-image-source

Указывает расположение изображения, которое будет использоваться для границы.

border-image-slice

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

border-image-width

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

border-image-outset

Указывает величину, на которую изображение для границы выходит за пределы рамки границы.

border-image-repeat

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

 

Определение, разбиение и повторение изображения

При использовании border-image вы должны сначала указать значения стиля границы. Ниже показан элемент div со сплошной черной границей шириной 15 пикселей. Черная область — это рамка, или область границы. Здесь будет по умолчанию помещено изображение для границы. Эта область настраивается указанием значений для border-image-width и border-image-outset.

Элемент HTML с черной границей

Рисунок ниже (с прозрачным фоном) имеет размер 81 x 81 пиксель и используется как изображение для границы в следующем примере.

Изображение с зелеными и синими кругами.

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


#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 round stretch;
}

Элемент HTML с границей, стиль которой задан при помощи свойства border-image.

Числа после источника изображения в показанном выше коде CSS определяют расстояния до элементов изображения (border-image-slice). В этом примере расстояние до элементов составляет 27 пикселей от верхнего, правого, нижнего и левого краев изображения. Эти расстояния выделены красным на следующем рисунке.

На рисунке показано расстояние до элементов, равное 27 пикселям.

Значения round и stretch определяют, как изображения заполняют область между границами (border-image-repeat). Первое значение, round, применяется к горизонтальным сторонам. Изображение располагается мозаикой или повторяется, пока не заполнит область между краями границы. Если заполнить область целым числом элементов мозаики не удается, изображение масштабируется повторно таким образом, чтобы целое число элементов заполнило область. Второе значение, stretch, применяется к вертикальным сторонам. В этом примере изображение растягивается так, чтобы заполнить область между краями границы. Stretch — это значение по умолчанию.

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

Элемент HTML с границей, стиль которой задан при помощи свойства border-image.


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 round; 
}


В этом примере заданные расстояния до элементов составляют 20 пикселей от верхнего и нижнего краев и 15 пикселей от левого и правого краев изображения. В этом примере вместо значения по умолчанию для border-image-repeat используется значение round.

Указание значений ширины и начала

Используя свойство border-image-width, вы также можете указать значения ширины и высоты изображения для границы с помощью определения смещений внутрь от краев области изображения для границы. Значение по умолчанию для Border-image-width равно 1. Это значит, что border-image-width кратно вычисленному значению свойства border-width или ширине рамки границы. В примере выше показан элемент div, у которого свойство border-image-width имеет значение 1, а ширина изображения для границы составляет 15 пикселей (1 умножить на значение свойства border-width, равное 15 пикселям). На следующем изображении показан результат использования того же кода CSS со свойством border-image-width, значение которого составляет 20 пикселей. В этом примере вы определяете смещение внутрь на 20 пикселей от краев области изображения для границы.

Элемент div с заданным свойством border-image-width.

Код CSS для показанного выше элемента div выглядит так:


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px round;
}

Вы можете продолжить работать с изображением и, используя свойство border-image-outset, указать величину, на которую область изображения для границы выходит за пределы рамки границы. Задав для border-image-outset значения 0 пикселей от верхнего края, 30 пикселей от правого края, 30 пикселей от нижнего края и 10 пикселей от левого края, вы получите следующее изображение.

Элемент div с заданными значениями свойства border-image-outset.

Код CSS для показанного выше элемента div выглядит так:


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px /0px 30px 30px 0px round;
}

Справочник по API

borderImage

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

Модуль фонов и границ CSS, уровень 3, раздел 6

 

 

Показ:
© 2014 Microsoft