background-clip

Описание

Свойство CSS background-clip определяет как будет отображаться фон элемента относительно его границ. Эффект хорошо заметен если границы элемента имеют прозрачные области и для элемента заданы отступы с помощью свойства padding.

background-clip
Значения: border-box | padding-box | content-box
Начальное значение: border-box
Область применения: все элементы
Наследование: нет
Поддержка браузерами Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 3+ (-webkit-background-clip), Firefox 4+, Android +, iOS +
Версия CSS: CSS3
Синтаксис JavaScript object.style.backgroundClip="padding-box"
Примечание:

Свойство background-clip поддерживает многослойные фоны и позволяет указывать значения для каджого слоя. Значения в этом случае перечисляются через запятую.

Синтаксис

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

Значения

Свойство background-clip может принимать следующие значения:

border-box
Фон отображается до границ
padding-box
Фон отображается под границами
content-box
Фон отображается только под содержимым элемента
Браузер IE7 по умолчанию отображает фон как при заданном значении padding-box.
Opera не поддерживает значение content-box.

Пример

body {
    background: #6f6;
	background-clip: border-box;
}
body {
    background: #6f6;
	background-clip: padding-box;
}

Попробовать в DemoPlay

Комментирование запрещено.