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 value | border-box |
|---|---|
| Aplica-se a | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | não |
| Midia | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the 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>#
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údo 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
| 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.