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


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



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


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

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




Свойство border-image-repeat устанавливает вид боковых границ изображения.К сожалению на момент написания статьи ещё не поддерживалась не одним распространённым браузером.Но можно посмотреть на его работу посмотрев работу свойства border-image для которого применяются значения свойства border-image-repeat.Свойству можно применить 2 значения,первое будет воздействовать на ось x ( ширину ),а второе на ось y ( высоту ) границ изображения.Свойство применимо к элементам кроме элементов таблицы,у которых свойство border-collapse сопровождается значением collapse,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


Свойство
Описание
stretchЧасти изображения растянутся до полного заполнения границ
repeatЧасти изображения будут повторятся до полного заполнения границ
roundЧасти изображения будут масштабироватся сливаясь в один элемент


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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-image-repeat</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-repeat {
border-image:url(/css/demo/img/border-image.png) 30 30 round repeat;
-moz-border-image:url(/css/demo/img/border-image.png) 30 30 round repeat;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 30 round repeat;
border-image-repeat:round repeat;
}
.repeat-stretch {
border-image:url(/css/demo/img/border-image.png) 30 30 repeat stretch;
-moz-border-image:url(/css/demo/img/border-image.png) 30 30 repeat stretch;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 30 repeat stretch;
border-image-repeat:repeat stretch;
}
-->
</style>
</head>
<body>
<center>
<p>Свойство border-image-repeat работает в свойстве border-image,не исключено что до сей поры через альтернативные свойства префиксов</p>
<br>
<img src="/css/demo/img/border-image.png">
<br>
<br>
<div class="round-repeat">Применяем значение round repeat</div>
<br>
<div class="repeat-stretch">Применяем значение repeat stretch</div>
</center>
</body>
</html>

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




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





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






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

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

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