background-clip

A propriedade CSS background-clip especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua área de borda, preenchimento ou conteúdo.

Experimente

Se o elemento não possuir as propriedades background-image (en-US) ou background-color definidas, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido ao border-style (en-US) ou border-image (en-US)); caso contrário a borda encobrirá a diferença.

Initial value	`border-box`
Aplica-se a	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	não
Computed value	as specified
Animation type	discrete

Sintaxe

/* Valores de palavra-chave */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Valores globais */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

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.
text Experimental: O fundo é desenhado dentro (cortado) do texto aparente.

Sintaxe formal

Error: could not find syntax for this item

Exemplos

Usando `border-box`

Conteúdo HTML

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

Conteúdo CSS

p {

  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: border-box;
}

Resultado

Usando `padding-box`

Conteúdo HTML

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

Conteúdo CSS

p {

  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: padding-box;
}

Resultado

Usando `content-box`

Conteúdo HTML

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

Conteúdo CSS

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: content-box;
}

Resultado

Usando `text`

Conteúdo HTML

<p>O fundo se extende dentro do texto.</p>

Conteúdo CSS

p {
  border: .8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;

  /* Note a necessidade de adicionar trânsparência ao texto*/
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
}

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 com navegadores

BCD tables only load in the browser