From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/background-clip/index.html | 247 +++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 files/pt-br/web/css/background-clip/index.html (limited to 'files/pt-br/web/css/background-clip/index.html') 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 +--- +
{{CSSRef}}
+ +

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.

+ +

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

+ + + +

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.

+ +

{{cssinfo}}

+ +

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 {{experimental_inline}}
+
O fundo é desenhado dentro (cortado) do texto aparente.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

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

+ +

{{EmbedLiveSample('Using_border-box', 540, 200)}}

+ +

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

+ +

{{EmbedLiveSample('Using_padding-box', 540, 200)}}

+ +

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

+ +

{{EmbedLiveSample('Using_content-box', 540, 200)}}

+ +

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

+ +

{{EmbedLiveSample('Using_text', 540, 200)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico1.0 [3]{{CompatGeckoDesktop("2.0")}} [1]9.0 [2]10.53.0 (522) [3]
content-box1.0 [3]{{CompatGeckoDesktop("2.0")}} [1]9.0 [2]{{CompatVersionUnknown}}3.0 (522) [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico4.1{{CompatGeckoMobile("14")}}7.112.1{{CompatVersionUnknown}}
content-box4.1{{CompatGeckoMobile("14")}}7.112.1{{CompatVersionUnknown}}
+
+ +

[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.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf