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


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



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


background-clip | Свойство CSS

Свойство background-clip для отступа фона от края

Свойство background-clip задает положение фону соответственно имеющихся границ.При этом значений может быть несколько,тогда они вписываются разделяясь запятой.Существует альтернативное свойство -webkit-background-clip,специально для браузера Safari.Свойство применимо ко всем элементам и проходит валидацию согласно версии CSS3.

Расширенные свойства

СвойствоОписание
-webkit-background-clipАльтернативное свойство для браузера Safari

Расширенные значения

ЗначениеОписание
padding-boxФон отображается от внутренних границ
border-boxФон отображается от внешних границ
content-boxФон отображается внутри контента


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



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

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство background-clip</title>
<style type="text/css">
<!--
.padding {
background: grey;
border: 30px dotted red;
background-clip: padding-box;
-webkit-background-clip: padding-box;
color: yellow;
text-decoration: blink;
height: 50px;
weight: 100px;
}
.border {
background: grey;
border: 30px dotted blue;
background-clip: border-box;
-webkit-background-clip: border-box;
color: yellow;
text-decoration: blink;
height: 50px;
weight: 100px;
}
.content {
background: grey;
border: 30px dotted orange;
background-clip: content-box;
-webkit-background-clip: content-box;
color: yellow;
text-decoration: blink;
height: 50px;
weight: 100px;
}
-->
</style>
</head>
<body>
<center>
<div class="padding">Фон внутри границ блока</div>
<br>
<div class="border">Фон у внешних границ блока</div>
<br>
<div class="content">Фон внутри контента</div>
<br>
</center>
<br>
</body>
</html>

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



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





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






Источник: http://www.w3.org/TR/css3-background/#the-background-clip
Категория: Свойства фона | Добавил: IZOTOP (25.03.2012) | Автор: Меренков Михаил E W
Просмотров: 853 | Теги: content-box, css, border-box, padding-box, background-clip, -webkit-background-clip | Рейтинг: 0.0/0

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

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