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 | a repeatable list |

Sintaxe
-------


```css
/\* 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
```

background-clip =   
  <visual-box># (en-US)    
  
<visual-box> =   
  content-box  | (en-US)  
  padding-box  | (en-US)  
  border-box     
  
```

Exemplos
--------

### Usando `border-box`

#### Conteúdo HTML


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


#### Conteúdo CSS


```css
p {
  border: 0.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


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


#### Conteúdo CSS


```css
p {
  border: 0.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


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


#### Conteúdo CSS


```css
p {
  border: 0.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


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


#### Conteúdo CSS


```css
p {
  border: 0.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, 0.2);
}
```


#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-clip |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `clip` (en-US)
* CSS Box Model