Manual de referência CSS

CSS @regras (RULES)

大全 de propriedades CSS

repeating CSS-radial-função gradient()

função CSS repeating-radial-gradient() cria uma imagem <image> composta por gradientes repetidos radiais a partir do ponto de origem. É semelhante ao radial-gradient() e usa os mesmos parâmetros, mas ele repetirá as cores em todas as direções para cobrir todo o contêiner. O resultado é 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>Manual Básico(oldtoolbag.com)</title>　
<style>
#grad1　{
　　height:　200px;
　　fundo-image: repetindo-radial-gradient(vermelho, verde　10, verde　15%);
}
</style>
</head>
<body>
<h3>Gradiente radial repetido</h3>
<div id="grad1></div>
<p><strong>Atenção:</strong> Internet Explorer　9　Versões anteriores a essa não suportam gradientes.</p>
</body>
</html>

Teste e veja ‹/›

Definição e uso

repetindo-radial-A função gradient() é usada para criar gradientes radiais "imagens" repetindo.

Versão suportada: CSS3

Compatibilidade do navegador

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

"webkit" ou "moz" ou "o" especifica o número da primeira versão do suporte para essa função como prefixo.

função
repetindo-radial-gradient()	26.0 10.0　-webkit-	10.0	16.0 3.6　-moz-	6.1 5.1　-webkit-	12.1 11.1　-o-

Sintaxe CSS

fundo-image: repetindo-radial-gradient(shape tamanho em posição, início-cor, ..., última-cor);

valor	descrição
forma	Define a forma do gradiente. Pode ser: ellipse (padrão): especifica o gradiente radial elíptico circle: especifica o gradiente radial circular
tamanho	Posição específica do contorno da borda. Pode ser um dos seguintes valores: farthest-canto (padrão): especifica o comprimento do raio do gradiente radial como a distância do centro até o canto mais distante do centro. closest-lado: especifica o comprimento do raio do gradiente radial como a distância do centro até o lado mais próximo do centro. closest-canto: especifica o comprimento do raio do gradiente radial como a distância do centro até o canto mais próximo do centro. farthest-lado: igual a closest-lado ao contrário, especifica o comprimento do raio do gradiente radial como a distância do centro até o lado mais distante do centro.
posição	Posição do centro, semelhante a on e background-posição ou transformação-origem. O padrão é "center"
início-cor, ..., última-cor	Para especificar as cores de início e fim do gradiente, você pode usar valores de comprimento ou porcentagem para especificar a posição das cores de início e fim, mas não são permitidos valores negativos.

Tutorial CSS: CSS3 Gradiente

Função CSS

Regra @charset do CSS Funções CSS