path: root/files/pt-br/web/css/background-clip/index.html

---
title: background-clip
slug: Web/CSS/background-clip
tags:
  - CSS clip
  - cor de fundo
translation_of: Web/CSS/background-clip
---
<div>{{CSSRef}}</div>

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

<p>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</p>



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

<p>{{cssinfo}}</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Valores de palavra-chave */</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> padding-box<span class="punctuation token">;</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> content-box<span class="punctuation token">;</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> text<span class="punctuation token">;</span>

<span class="comment token">/* Valores globais */</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
<span class="property token">background-clip</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>border-box</code></dt>
 <dd>O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).</dd>
 <dt><code>padding-box</code></dt>
 <dd>Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).</dd>
 <dt><code>content-box</code></dt>
 <dd>O fundo é desenhado dentro (cortado) a caixa de conteúdo.</dd>
 <dt><code id="text">text</code> {{experimental_inline}}</dt>
 <dd>O fundo é desenhado dentro (cortado) do texto aparente.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Using_border-box" name="Using_border-box">Usando <code>border-box</code></h3>

<h4 id="Conteúdo_HTML">Conteúdo HTML</h4>

<pre class="brush: html">&lt;p&gt;O fundo se extende atrás da borda.&lt;/p&gt;</pre>

<h4 id="Conteúdo_CSS">Conteúdo CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample('Using_border-box', 540, 200)}}</p>

<h3 id="Using_padding-box" name="Using_padding-box">Usando <code>padding-box</code></h3>

<h4 id="Conteúdo_HTML_2">Conteúdo HTML</h4>

<pre class="brush: html">&lt;p&gt;O fundo se extende até dentro da fronteira da borda.&lt;/p&gt;</pre>

<h4 id="Conteúdo_CSS_2">Conteúdo CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultado_2">Resultado</h4>

<p>{{EmbedLiveSample('Using_padding-box', 540, 200)}}</p>

<h3 id="Using_content-box" name="Using_content-box">Usando <code>content-box</code></h3>

<h4 id="Conteúdo_HTML_3">Conteúdo HTML</h4>

<pre class="brush: html">&lt;p&gt;O fundo se extende somente até o limite da caixa de conteúdo.&lt;/p&gt;</pre>

<h4 id="Conteúdo_CSS_3">Conteúdo CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultado_3">Resultado</h4>

<p>{{EmbedLiveSample('Using_content-box', 540, 200)}}</p>

<h3 id="Using_text" name="Using_text">Usando <code>text</code></h3>

<h4 id="Conteúdo_HTML_4">Conteúdo HTML</h4>

<pre class="brush: html">&lt;p&gt;O fundo se extende dentro do texto.&lt;/p&gt;</pre>

<h4 id="Conteúdo_CSS_4">Conteúdo CSS</h4>

<pre class="brush: 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);
}</pre>

<h4 id="Resultado_4">Resultado</h4>

<p>{{EmbedLiveSample('Using_text', 540, 200)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidade</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0 [3]</td>
   <td>{{CompatGeckoDesktop("2.0")}} [1]</td>
   <td>9.0 [2]</td>
   <td>10.5</td>
   <td>3.0 (522) [3]</td>
  </tr>
  <tr>
   <td><code>content-box</code></td>
   <td>1.0 [3]</td>
   <td>{{CompatGeckoDesktop("2.0")}} [1]</td>
   <td>9.0 [2]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.0 (522) [3]</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidade</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>4.1</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>7.1</td>
   <td>12.1</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>content-box</code></td>
   <td>4.1</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>7.1</td>
   <td>12.1</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[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: <code>-moz-background-clip: padding | border</code>.</p>

<p>[2] Internet Explorer 7 suportava, mas em outras versões do Internet Explorer ele se comporta como <code>background-clip:padding</code> se <code>overflow: hidden | auto | scroll</code>.</p>

<p>[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: <code>padding</code>, <code>border</code>, and <code>content</code>.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{cssxref("clip")}}</li>
 <li><a href="/en-US/docs/Web/CSS/box_model">CSS Box Model</a></li>
</ul>