background-clip

Ir para:
  1. Resumo
  2. Sintaxe
  3. Exemplos
  4. Especificações
  5. Compatibilidade de navegadores
  6. Veja também

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

Initial valueborder-box
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Especificação Estado Comentário
CSS Backgrounds and Borders Module Level 3
The definition of 'background-clip' in that specification.		 Candidata a Recomendação  

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] (Yes) 3.0 (522) [3]
Funcionalidade Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 4.1 14.0 (14) 7.1 12.1 (Yes)
content-box 4.1 14.0 (14) 7.1 12.1 (Yes)

[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

Etiquetas do documento e colaboradores

Colaboradores desta página: fscholz, Sebastianz, filipewl
Última atualização por: fscholz,