Como aplicar o CSS3 border-radius Effect

O efeito CSS3 border-radius define cantos arredondados. E, você precisa usar prefixos específicos de navegadores ao definir um border-radius. Aqui algumas regras para a definição de um border-radius:

  • Não é possível aplicar uma borda de raio para um selector (um estilo CSS) que não têm uma altura ou a largura (ou, pelo menos, um do outro) definido.

  • A propriedade de base para uma borda de raio CSS3 é fronteira de raio, seguido por um valor. Por exemplo, border-radius: 12px; cria cantos arredondados em todos os quatro cantos do elemento ao qual ele é aplicado. E a # 147 arredondamento # 148- desses cantos se estenderá por 12 pixels de cantos.

  • Você pode definir raios separado para cada canto de uma fronteira. Por exemplo:

border-top-left;radius:1px;border-top-right;radius:2px;border-bottom-right;radius:3px;border-bottom-left;radius:4px;

Veja o seguinte exemplo: um estilo de classe que define ambas as bordas e raios de fronteira. O seguinte estilo CSS cria um .fronteiras classe que se aplica tanto nas fronteiras e raios de fronteira para qualquer elemento ao qual ele é aplicado:

.fronteiras {border: 12px sólida gray-border-top-left;radius:48px;border-top-right;radius:24px;border-bottom-right;radius:12px;border-bottom-left;radius:6px;padding: 12px;}

O resultado do código anterior, como mostrado no navegador Chrome, retrata o seletor de classe (estilo) com uma borda definida e propriedades raios nas fronteiras definidas.

image0.jpg

O código de canto arredondado (border-radius) funciona bem em versões contemporâneas de IE e Chrome porque esses navegadores não requerem um prefixo para este efeito. Mas, para tornar o trabalho border-radius no Mozilla Firefox, navegadores WebKit como o Safari (para desktop / laptop e celular), e algumas versões do Opera, você tem que fazer três cópias do código border-radius com os prefixos apropriados, como este:

.fronteiras {border: 12px sólida gray-border-top-left;radius:48px;border-top-right;radius:24px;border-bottom-right;radius:12px;border-bottom-left;radius:6px;-moz-border-top-left;radius:48px;-moz-border-top-right;radius:24px;-moz-border-bottom-right;radius:12px;-moz-border-bottom-left;radius:6px;-webkit-border-top-left;radius:48px;-webkit-border-top-right;radius:24px;-webkit-border-bottom-right;radius:12px;-webkit-border-bottom-left;radius:6px;-o-border-top-left;radius:48px;-o-border-top-right;radius:24px;-o-border-bottom-right;radius:12px;-o-border-bottom-left;radius:6px;padding: 12px;}

Só com quatro versões da definição de estilo CSS este trabalho de fronteira em todos os principais, os navegadores atuais.

Folks visualizando a página em navegadores mais antigos têm de renunciar a experiência design avançado que elas teriam se estivessem vendo a página em um navegador da atual geração. Mas porque o efeito CSS3 não é um requisito para visualizar o conteúdo da página, ainda é acessível (e, neste exemplo, a fronteira ainda aparece).

Semelhante

menu