border-image | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Справочник CSS3 » Свойства границ


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


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

Свойство border-image устанавливает изображение в виде границы.




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

Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-image</title>
<meta charset="utf-8">
<style type="text/css">
<!--
p {
color:green;
font-size:20px;
}
div {
padding:20px;
border-width:20px;
width:300px;
color:#fff;
font-size:20px;
}
.round {
border-image:url(/css/demo/img/border-image.png) 30 30 round;
-moz-border-image:url(/css/demo/img/border-image.png) 30 30 round;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 30 round;
}
.repeat {
border-image:url(/css/demo/img/border-image.png) 30 30 repeat;
-moz-border-image:url(/css/demo/img/border-image.png) 30 30 repeat;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 30 repeat;
}
.stretch {
border-image:url(/css/demo/img/border-image.png) 30 30 stretch;
-moz-border-image:url(/css/demo/img/border-image.png) 30 30 stretch;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 30 stretch;
}
-->
</style>
</head>
<body>
<center>
<p>Берём изображение</p>
<br>
<img src="/css/demo/img/border-image.png">
<br>
<br>
<div class="round">Применяем значение round</div>
<br>
<div class="repeat">Применяем значение repeat</div>
<br>
<div class="stretch">Применяем значение stretch</div>
</center>
</body>
</html>

Пример в действии




Генератор свойства border-image




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#border-images
Категория: Свойства границ | Добавил: IZOTOP (11.05.2012) | Автор: Меренков Михаил E W
Просмотров: 696 | Теги: css, border-image, style, для чего, что означает | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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