×
Ir ao conteúdo
  • Cadastre-se

Utilização da propriedade Border-radius nos navegadores


DiF

Posts recomendados

  • Moderador

bom, estou deixando aqui uma informação um tanto útil, sobre uma das propriedades legais do CSS3: arredondamento de cantos em uma div.

Ja vi gente aqui com dificuldade de arredondar cantos, e por solução acabava optando por usar imagens nos 4 cantos e tendo que posicionar no css e com isso acabava deixando a pagina um "poquinho" mais pesadinha... porque qto menos imagens utilizar melhor, na minha opinião. então com base nisso o que puder fazer com CSS ao invés de imagem fica melhor.

Como sabemos.. ( ou não) os navegadores são distintos em se tratando de renderizações de algumas propriedades do CSS então deixo aqui uma tabelinha de equivalência do atributo border-radius para os navegadores Mozilla Firefox, chrome, safari, opera e IE9.

Mozilla Firefox:

-moz-border-radius: arredonda os quatro cantos

-moz-border-radius-topLeft: arredonda o canto superior esquerdo

-moz-border-radius-topRight: arredonda o canto superior direito

-moz-border-radius-bottomLeft: arredonda o canto inferior esquerdo

-moz-border-radius-bottomRight: arredonda o canto inferior direito

Chrome, Safari:

-webkit-border-radius: arredonda os quatro cantos

-webkit-border-top-left-radius: arredonda o canto superior esquerdo

-webkit-border-top-right-radius: arredonda o canto superior direito

-webkit-border-bottom-left-radius: arredonda o canto inferior esquerdo

-webkit-border-bottom-right-radius: arredonda o canto inferior direito

Opera, IE9:

border-radius: arredonda os quatro cantos

border-top-left-radius: arredonda o canto superior esquerdo

border-top-right-radius: arredonda o canto superior direito

border-bottom-left-radius: arredonda o canto inferior esquerdo

border-bottom-right-radius: arredonda o canto inferior direito

exemplo de aplicação do atributo em uma div:

CSS:


#cantosArredondados{
position: absolute;
top: 20%;
left: 20%;
width: 200px;
height: 200px;
display: block;
background-color: blue;
[COLOR="Red"]-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;[/COLOR]
}

.bottomRounded{
position: absolute;
top: 20%;
left: 40%;
width: 200px;
height: 200px;
display: block;
background-color: red;
[COLOR="Red"]-moz-border-radius-bottomLeft: 20px;
-moz-border-radius-bottomRight: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;[/COLOR]

}


HTML:



<div id="cantosArredondados"></div>
<div class="bottomRounded"></div>

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

  • Moderador

Queria saber se é possível aplicá-las em imagens e como?

Abraços!

Bom, para imagens inicialmente não seria aplicável.. pois ele arrededonda os cantos da div.. mas pode ser que funcione se você arredondar os cantos da div e setar a imagem como background-image. nao testei.. se funciona posta que isso também me interessou agora. rsrs nao tinha pensado em tentar arredondar cantos de imagens com esta propriedade.. uma vez que sempre utilizei o photoshop para arredondamento de cantos de imagens.

se funcionar.. será muito útil rsrs

Link para o comentário
Compartilhar em outros sites

  • Moderador
putz.. passi o dia hj tentando fazer isso no meu site, mas pro ie8 nao consegui... ¬¬

lembrando amigo, que estas sao tags de CSS3. o IE8 nao possui suporte ao CSS3. para isso você deve pesquisar um arquivo feito em javascript que faz um tipo de hack. ja o vi em algum lugar..mas nao cheguei a salvar... é um arquivo que você importa dentro do css... que ai faz o IE8 interpretar as tags do CSS3.

o CSS3 é apenas suportado nativamente pelo Mozilla Firefox4, opera, chrome, safari e IE9

Link para o comentário
Compartilhar em outros sites

Bom, para imagens inicialmente não seria aplicável.. pois ele arrededonda os cantos da div.. mas pode ser que funcione se você arredondar os cantos da div e setar a imagem como background-image. nao testei.. se funciona posta que isso também me interessou agora. rsrs nao tinha pensado em tentar arredondar cantos de imagens com esta propriedade.. uma vez que sempre utilizei o photoshop para arredondamento de cantos de imagens.

se funcionar.. será muito útil rsrs

não funcionou, mas a ideia parecia boa:lol:, valeu!

Link para o comentário
Compartilhar em outros sites

  • Moderador

amigo, funciona sim. acabei de testar aqui... como você aplicou?

faça desta maneira:

HTML:


<div id="teste"></div>

CSS:


#teste{
width: 200px;
height: 200px;
display: block;
background-image: url(imagem.jpg);
background-repeat: no-repeat;
background-size: auto;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

no exemplo do background.. coloquei a imagem na mesma pasta do projeto.. ou seja no root.

funciona porque eu testei.

Link para o comentário
Compartilhar em outros sites

Cara,salvou meu final de semana!

Estava pesquisando isso mesmo,e vi que ia ter que fazer com imagens.Ai antes de começar,vim da uma volta no fórum e você me salva com 3 linhas!

valeu hein.

E pros que disseram que nao funciana,verifica na tabela o código referente ao seu navegador.Pro meu rodar em todos eu tive que add as 3 linhas referente aos navegadores e funciona perfeitamente.E eu estou usando em uma menu <li>

valeu ae dif

Link para o comentário
Compartilhar em outros sites

  • Moderador

exato will, para funcionar em todos os navegadores citados... tem que colocar as tags referentes ao navegador. e só uma coisa.. esta tecnica nao funciona em navegadores mais antigos. por se tratar deu uma propriedade nova do css3.

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!