Главная » Все материалы сайта » Справочник CSS-3 » Границы

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

border-image

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
	7.0+	10.5+	3.0+	3.5+		1.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, за исключением тех, у кого border-collapse задан как collapse
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#border-images

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Используется для отображения рисованной рамки вокруг элемента, т.е. border-image устанавливает в качестве границы изображение. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

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

1. border-image:10; - Толщина границы одинакова для всех четырёх сторон
2. border-image:10 10; - Первое значение для верхней и нижней части, второе для левой и правой
3. border-image:10 10 10; - Первое значение для верхней границы, второе для левой и правой, третье для нижней границы
4.border-image:10% 10% 10% 10%; - По часовой стрелке указываются значения для верхней, правой,нижней и левой границы

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

Дополнительные свойства применяемые к border-image в табличном виде

Свойство	Описание
border-image-source	Устанавливает изображение через URL адрес, заменяя стиль границы изображением (обязательное наличие в коде)
border-image-slice	Устанавливает отступы изображению (обязательное наличие в коде)
border-image-width	Устанавливает размер ширины от внутренней части элемента, в котором находится изображение (необязательное наличие в коде
border-image-outset	Устанавливает размер выхода изображения за пределы значений свойства border-image-width (необязательное наличие в коде)
border-image-repeat	Устанавливает вид крайних границ изображения, заданного свойством border-image-source, по оси x и y (горизонтали и вертикали ) ,(обязательное наличие в коде)
-webkit-border-image	Альтернативное свойство для браузеров Safari и Chrome
-moz-border-image	Альтернативное свойство для браузера Mozila

Дополнительные значения применяемые к border-image в виде таблицы

Значение	Описание
none	Изображение как граница не работает (следует установить стиль границ через свойство border-style)
URL	Адрес (полный или относительный) к изображению, используемому в качестве границы
<Число>	Положительные числа без указания px, от одного до четырёх, устанавливают размер границ по четырём сторонам (или менее четырёх), делят угловые и боковые части на условные сектора, устанавливаются через пробел
<Процент>	Процентное соотношение толщины секторов границ, как и числовое значение может иметь от одного до четырёх процентных значений, записанных через пробел с указанием процентного символа
stretch	Растягивает изображение до указанных в значениях размеров
repeat	Устанавливает повторение рисунка до заполнения указанных размеров
round	Устанавливает повторение рисунка до целого значения

Синтаксис

border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}

Значения

none

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

URL

Путь к графическому файлу. Обязательный параметр.

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

Рис. 1. Изображение для создания рамки

<число>

Одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления. Сами единицы не пишутся, только число (10, а не 10px). На рис. 2 красными линиями выделены необходимые для создания рамки области.

Рис. 2. Деление исходного изображения на области

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений	Результат
1	Устанавливает границы одинаковой толщины на каждой стороне рисунка.
2	Первое значение устанавливает высоту верхней и нижней границы, второе — левой и правой.
3	Первое значение определяет высоту верхней границы, второе — левой и правой, а третье — высоту нижней границы.
4	Поочередно устанавливается размеры верхней, правой, нижней и левой границы.

<проценты>

Аналогично <числу>, но значения задаются в процентах. Тот или другой параметр обязателен.

<толщина>

Через слэш пишется одно, два, три или четыре значения толщины границы на каждой стороне элемента. Является аналогом border-style и использует тот же синтаксис.

stretch

Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.

repeat

Повторяет рисунок границы.

round

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

Влияние этих параметров на вид рамки показано на рис. 3.


stretch	repeat	round

Рис. 3. Результат использования параметров stretch, repeat и round

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>border-image</title>
 <style>
 div {
 border: 30px solid #40c4c8;
 padding: 20px;
 -moz-border-image: url(images/bg-image.png) 30 round round;
 -webkit-border-image: url(images/bg-image.png) 30 round round; 
 -o-border-image: url(images/bg-image.png) 30 round round;
 border-image: url(images/bg-image.png) 30 round round;
 }
 </style>
 </head>
 <body>
 <div>Витраж представляет собой композицию сделанную из 
 множества цветных стекол обрамлённых проволокой и наиболее 
 эффектно смотрится при прохождении через него солнечного 
 или искусственного света.</div>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 4. Вид рамки в браузере Chrome

Браузеры

Firefox поддерживает свойство -moz-border-image.

Safari, Chrome и iOS поддерживают свойство -webkit-border-image.

Opera поддерживает свойство -o-border-image, начиная с версии 11.0 понимает стандартное свойство без префиксов.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Границы | Добавил: evkuriy (04.07.2013)

Просмотров: 701 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

border-image

Краткая информация

Версии CSS

Описание

Дополнительные свойства применяемые к border-image в табличном виде

Свойство

Описание

Дополнительные значения применяемые к border-image в виде таблицы

Значение

Описание

Синтаксис

Значения

Пример

Браузеры