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


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



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


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

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




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




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


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


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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство border-image-slice</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-slice:30 30;
}
.round {
border-image:url(/css/demo/img/border-image.png) 30 40 30 round;
-moz-border-image:url(/css/demo/img/border-image.png) 30 40 30 round;
-webkit-border-image:url(/css/demo/img/border-image.png) 30 40 30 round;
border-image-slice:30 40 30;
}
-->
</style>
</head>
<body>
<center>
<p>Свойство border-image-slice не работает ( пока ),но работает в свойстве border-image,т.к является обязательным к написанию,а само свойство я внизу дописал чтобы было )))</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 (12.05.2012) | Автор: Меренков Михаил E W
Просмотров: 660 | Теги: css, style, для чего, что означает, border-image-slice | Рейтинг: 0.0/0

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

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