background-clip

Resumo

A propriedade CSS background-clip especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua borda.

Se nenhuma imagem ou cor de fundo for definida, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido ao border-style ou border-image); caso contrário a borda encobrirá a diferença.

Sintaxe

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

background-clip: inherit;

Valores

border-box

O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).

padding-box

Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).

content-box

O fundo é desenhado dentro (cortado) a caixa de conteúdo.

Sintaxe formal

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

Exemplos

Usando padding-box

Conteúdo HTML

<p>O fundo amarelo se extende até dentro da fronteira da borda.</p>

Conteúdo CSS

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* O fundo se extende até dentro da fronteira da borda. */ 
   background: #F8D575;
   background-clip: padding-box;
 }

Resultado

Usando border-box

Conteúdo HTML

<p>O fundo amarelo se extende atrás da borda.</p>

Conteúdo CSS

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* O fundo amarelo se extende atrás da borda. */
   background: #F8D575;
   background-clip: border-box;
 }

Resultado

Usando content-box

Conteúdp HTML

<p>O fundo amarelo se extende somente até o limite da caixa de conteúdo.</p>

Conteúdo CSS

p {
   border: 5px navy;
   border-style: dotted double;
   margin: 2em;
   padding: 2em;

   /* O fundo amarelo se extende somente até o limite da caixa de conteúdo. */
   background: #F8D575;
   background-clip: content-box;
 }

Resultado

Especificações

Compatibilidade de navegadores

[1] Gecko suportava, desde a versão 1.1 até a versão 1.9.2, que correspende ao Firefox 1.0 até 3.6 incluso uma sintaxe diferente e prefixada: -moz-background-clip: padding | border.

[2] Internet Explorer 7 suportava, mas em outras versões do Internet Explorer ele se comporta como background-clip:padding se overflow: hidden | auto | scroll.

[3] Webkit também suporta a versão prefixada desta propriedade, e neste caso, em adição as palavras chaves atuais, os sinônimos alternativos são: padding, border, and content.

Veja também

• clip
• CSS Box Model