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


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



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


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

Свойство border-image-outset устанавливает координаты выступа изображения.




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




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


Свойство
Описание
<Число>Любое положительное значение
<Ширина>Любое числовое значение,сработает как множитель для всех четырёх сторон


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




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



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

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




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





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






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

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

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