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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
- O fundo é desenhado dentro (cortado) do texto aparente.
Sintaxe formal
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 de navegadores
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
.