background-clip

Описание

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If no background image or color is set, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise the border covers up the difference.

Синтаксис

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-clip: inherit;

Значения

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

padding-box

No background is drawn below the border (background extends to the outside edge of the padding).

content-box

The background is painted within (clipped to) the content box.

Формальный синтаксис

<box>#
where 
<box> = border-box | padding-box | content-box

Примеры

HTML

<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
<p class="content-box">The yellow background extends only to the edge of the content box.</p>

CSS

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Результат

Спецификации

Совместимость с браузерами

[1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-clip: padding | border.

[2] Internet Explorer 7 supported, but in other versions of Internet Explorer it behaves like background-clip:padding if overflow: hidden | auto | scroll.

[3] Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content. In addtion to that, Webkit also supports an unoffical text value.

Смотрите также

• clip
• CSS Box Model