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


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



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


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

Свойство border-image-width устанавливает ширину от внутреннего края границы.




Свойство border-image-width устанавливает ширину фонового изображения от внутренних границ элемента в котором находится.При одном заданном значении,оно распространяется на все выступы.Можно применять от одного до четырёх числовых или процентных значения через пробел.Принадлежность чисел к px ( пикселям ) не указывается,а процентный символ указывается.Если будет задано три значения( сверху, справа и снизу ),то четвертое значение ( слева ) будет равно второму выступу ( справа ).Если задано только два значения,то третье будет равно первому,а четвертое второму.К сожалению на момент написания статьи ещё не поддерживалась не одним распространённым браузером,ниже в статье есть генератор свойства border-image по работе которого можно визуально определить воздействие свойства border-image-width на фоновое изображение выходящее за границы ( сдвигайте ползунок свойства,увеличивая значение ).Свойство является не обязательным к написанию.Свойство применимо к элементам кроме элементов таблицы,у которых свойство border-collapse сопровождается значением collapse,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




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


Свойство
Описание
<Число>Любое положительное значение
<Процент>Значение в процентах
<Значение>Любое числовое значение,сработает как множитель для всех четырёх сторон указанных в свойстве border-width
autoШирина фонового изображения будет зависить от значений указанных в свойстве border-image-slice


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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-image-width</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;
border-image-width:10%;
}
.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;
border-image-width:10%;
}
.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;
border-image-width:10%;
}
-->
</style>
</head>
<body>
<center>
<p>В момент написания свойство не работало в браузерах,пример не может отражать воздействия на свойство border-image работа которого представлена в примере,свойство не является обязательным к написанию и я дописал его как пример.
Но когда свойство заработает,фоновое изображение выйдет за границы элемента на 10 процентов по всем 4 сторонам.</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 + border-image-width




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





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






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

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

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