X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acesso Premium Free

Acesso a nossa biblioteca completa de artigos Hub Premium, arquivos de projeto e os primeiros 10% de cada Tutorial-Video da Biblioteca Tutorial on-line .

Criar sua conta gratuita agora!

Criado cantos arredondados em objetos de layout no CSS3
Traduzido pelo Google Translate

Se você não tem feito muita leitura acima ainda sobre o que há de novo no CSS3 , é bastante impressionante. Há todos os tipos de possibilidades recém-introduzidos, incluindo gradientes, várias colunas, imagens de fronteira, e que nós estaremos falando uma olhada aqui, raio de fronteira. Raio de fronteira nos permite definir cantos arredondados em contrário objetos retangulares em layouts nosso site.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Passo 1 - Aplicando A Radius Border CSS3

Primeiro, vamos aplicar o raio de fronteira. Na sua folha de estilo, encontrar a regra que você gostaria de aplicar o efeito de canto arredondado para. Muitas vezes, isso vai ser um seletor de ID que está controlando um elemento div. Certifique-se também que você também está aplicando uma cor de fundo ou uma borda (ou ambos) de modo que você pode ver os cantos!

Em seguida, adicione o "border-radius" propriedade para a sua regra, seguido por um valor. Quanto maior o valor que você utilizar, mais arredondado da esquina.

Aqui, eu estou aplicando o raio de fronteira para o meu # Content ID selector, que está controlando o div que contém o meu conteúdo da página, como você pode ver na captura de tela incluídos. Certifique-se de salvar seu trabalho e confira seu trabalho no seu browser.

Se você ainda está recebendo de 90 graus cantos, o seu navegador é aquele que não suporta esse recurso. Mas não embalar as coisas em apenas ainda. Vamos verificar que truque legal que mencionei anteriormente.

Passo 2 - Garantir a eficácia canto arredondado Obras

Como mencionado, apenas as últimas versões dos browsers populares apoio propriedade CSS3 do raio de fronteira. Então, como você pode garantir que seu layout vai funcionar para os usuários que ainda estão usando navegadores que são uma versão ou dois atrás? Você pode usar alguns códigos adicionais, como segue.

Primeiro, vamos adicionar "-moz-border-radius:" seguido de um valor de raio. Este alvos o que é referido como navegadores Gecko - mais notavelmente FireFox.

Em seguida, vamos adicionar "-webkit-border-radius:" seguido pelo mesmo valor que usamos acima. Este vai bater todos os navegadores baseados no WebKit, como Chrome e Safari. Uma vez adicionado, salve o seu trabalho e atualize seu navegador.

Passo 3 - A exceção confirma a regra

Agora o que acontece com o Internet Explorer, navegador favorito a cada web designer (sic), você pergunta? Bem, todas as opções acima não irá funcionar. Na verdade, o código que nós adicionamos até este ponto será simplesmente ignorado pelo Explorer, e cantos simplesmente tornar padrão em suas 90 graus estilo, o que é melhor do que ter que quebrar, certo? É possível retirar cantos arredondados no IE, mas sei que é um pouco de trabalho extra; e talvez isso é algo que nós poderíamos entrar em uma dica de futuro. Por enquanto, porém, apreciar a sua cantos arredondados em todos os outros navegadores!

CSS é maravilhoso. Descubra mais sobre Designing Layouts Floating CSS .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link