manual de referência CSS

regras CSS (RULES)

大全 de propriedades CSS

repeating da CSS-linear-função gradient()

função repeating da CSS-linear-gradient() cria uma <image> composta por gradientes lineares repetidos, semelhante à função repeating da CSS.-A função gradient(), usando os mesmos parâmetros, repetirá o gradiente em todas as direções para cobrir todo o contêiner. O resultado dessa função é um objeto do tipo <gradient>, que é um tipo especial de <image>.

Função CSS

Exemplo Online

Gradiente linear repetido:

Exemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Tutorial Básico(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-cor: vermelho;　/*　Exibido quando o navegador não suportar　*/
　　background-image: repetindo-linear-gradient(vermelho, verde　10,verde　20%);　
}
#grad2　{
　　height:　200px;
　　background-cor: vermelho;　/*　Exibido quando o navegador não suportar　*/
　　background-image: repetindo-linear-gradient(45deg,vermelho,amarelo　7,green　10%);　
}
#grad3　{
　　height:　200px;
　　background-cor: vermelho;　/*　Exibido quando o navegador não suportar　*/
　　background-image: repetindo-linear-gradient(190deg,vermelho,amarelo　7,green　10%);　
}
#grad4　{
　　height:　200px;
　　background-cor: vermelho;　/*　Exibido quando o navegador não suportar　*/
　　background-image: repetindo-linear-gradient(90deg,vermelho,amarelo　7,green　10%);　
}
</style>
</head>
<body>
<h1>Gradiente linear repetido</h1>
<div id="grad1></div>
<p>45deg:</p>
<div id="grad2></div>
<p>190deg:</p>
<div id="grad3></div>
<p>90deg:</p>
<div id="grad4></div>
<p><strong>Atenção:/strong> Internet Explorer　9　Os navegadores IE de versões anteriores a essa não suportam gradientes lineares./p>
</body>
</html>

Teste e veja ‹/›

Definição e uso

função-linear-A função gradient() é usada para criar uma "imagem" de gradiente linear repetido.

Versão suportada: CSS3

Compatibilidade do navegador

Os números na tabela representam o número da primeira versão do navegador que suporta a função.

"webkit" ou "moz" ou "o" indicam o prefixo do número da primeira versão suportada da função.

função
função-linear-repetindo	26gradient() 10gradient()　-moz-	10gradient()	16gradient() 3webkit6　-.0-	6webkit1 5webkit1　-moz-	12webkit1 11webkit1　-.-

o

Sintaxe CSS-linear-background: repetindo(angle | to side-ou-corner, color-stop1, color-stop2, ...);

Valor	Descrição
ângulo	Defina a direção do ângulo do gradiente. De 0deg a 360deg，padrão de 180deg。
lado-ou-corner	Especifique a posição de início do gradiente linear. Composta por dois termos: o primeiro especifica a posição horizontal (left ou right), e o segundo especifica a posição vertical (top ou bottom). A ordem é随意, cada termo é opcional.
color-stop1, color-stop2,...	Especifique as cores de início e fim do gradiente, compostas por valores de cor e posição de parada (opcional, especificada em porcentagem).

Exemplo Online

Diferentes gradientes repetidos:

Exemplo

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Tutorial Básico(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　background-image: repetindo-linear-gradient(45deg,red,blue　7,green　10%);
}
#grad2　{
　　height:　200px;
　　background-image: repetindo-linear-gradient(190deg,red,blue　7,green　10%);
}
#grad3　{
　　height:　200px;
　　background-image: repetindo-linear-gradient(90deg,red,blue　7,green　10%);
}
</style>
</head>
<body>
<h3>Gradiente linear repetido</h3>
<p>45　Graus de gradiente linear, de vermelho para azul:</p>
<div id="grad1></div>
<p>190 graus de gradiente linear, de vermelho para azul:</p>
<div id="grad2></div>
<p>90 graus de gradiente linear, de vermelho para azul:</p>
<div id="grad3></div>
<p><strong>Atenção:</strong> Internet Explorer　9　E versões anteriores do IE não suportam gradientes.</p>
</body>
</html>

Teste e veja ‹/›

Tutorial CSS: CSS3 Gradiente

Função CSS

Regra @charset CSS Funções CSS