manual de referência CSS

CSS @regras (RULES)

大全 de atributos CSS

Borda do CSS-Atributo right Borda do CSS-left-Atributo width

CSS3 borda-Método de uso e exemplo do radius

borda-A propriedade radius define os cantos do elemento em forma arredondada. Éborda-top-left-radius,borda-top-right-radius,borda-bottom-right-radiuseborda-bottom-left-radiusAbreviação do atributo

A tabela a seguir fornece uma descrição de uso e histórico de versões deste atributo, bem como a sintaxe de uso neste atributo no script JavaScript.

Valor padrão:	0
Aplicável a:	Todos os elementos
Herança:	Nenhum
Animável:	é.Por favor, consulte Propriedades animadas.
Versão:	CSS3nova funcionalidade
Sintaxe JavaScript:	object object.style.borderRadius="8px"

Atenção:borda-Mesmo que o radius não esteja definido ou seu valor seja configurado como none, este atributo tornará o fundo do elemento arredondado.

borda-Sintaxe de uso do radius

A sintaxe deste atributo é a seguinte:

borda-radius: [ length | percentage ]　1　to　4　values　
　\-------------------------------/
　　　　　　　　　　　　First radii
/　[length | percentage]　1　to　4　values | initial | inherit
　　　\------------------------------/
　　　　　　　　Segundos raios (opcional)

Este atalho pode ser usado com um, dois, três ou quatro valores separados por espaços em branco.

Se especificadoUm valorSe especificados, definem o raio de todos os cantos.
Se especificadosDois valoresOs primeiros dois valores são usados para o canto superior esquerdo e inferior direito, e o segundo valor é usado para o canto superior direito e inferior esquerdo.
Se especificadosTrês valoresOs primeiros dois valores são usados para o canto superior esquerdo e inferior direito, e o terceiro valor é usado para o canto superior direito e inferior esquerdo.
Se especificadosQuatro valoresSe especificados, os valores serão aplicados na ordem superior esquerda, superior direita, inferior direita e inferior esquerda.

Os exemplos a seguir mostram como usar a borda-Atributo radius.

Exemplo

　　div {
　　　borda:　2px sólido #f08080;
　　　borda-radius:　20px;
　　}

Teste e veja‹/›

Atenção:Segundo valor opcional de comprimento (começando com "", /O valor inicial (começando com ") define o raio vertical do canto, portanto, a forma do canto é um quarto de elipse. Se o segundo comprimento for omitido ou igual ao segundo comprimento, a forma do canto é um quarto de círculo. Se qualquer comprimento for zero, o canto é quadrado, não arredondado.

Valor do atributo

A tabela a seguir descreve os valores deste atributo.

Valor	Descrição
length	Em valores de comprimento como px, pt, cm, em, etc., não é permitido usar valores negativos.
percentage	O tamanho do raio, em porcentagem. Se for um canto elíptico, o percentual do raio horizontal é calculado em relação à largura da caixa do elemento e o percentual do raio vertical é calculado em relação à altura da caixa do elemento. Não é permitido usar valores negativos.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado adota a borda do elemento pai-Valor do atributo radius.

Compatibilidade do navegador

borda-Compatibilidade do atributo radius dos navegadores, os números na tabela a seguir representam a versão mínima do navegador que suporta o atributo; todos os navegadores populares suportam o atributo.

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 5+ Opera 10.5+

Aviso: Internet Explorer 8e versões mais antigas não suportam essa borda-Atributo radius. No IE9e versões mais recentes são compatíveis.