diff options
Diffstat (limited to 'files/pt-br/web/css/background-clip/index.html')
| -rw-r--r-- | files/pt-br/web/css/background-clip/index.html | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/files/pt-br/web/css/background-clip/index.html b/files/pt-br/web/css/background-clip/index.html new file mode 100644 index 0000000000..317d5080c2 --- /dev/null +++ b/files/pt-br/web/css/background-clip/index.html @@ -0,0 +1,247 @@ +--- +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"><p>O fundo se extende atrás da borda.</p></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"><p>O fundo se extende até dentro da fronteira da borda.</p></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"><p>O fundo se extende somente até o limite da caixa de conteúdo.</p></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"><p>O fundo se extende dentro do texto.</p></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> |