Criando cantos arredondados usando CSS [fechado]
https://stackoverflow.com/questions/7089
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como posso criar cantos arredondados usando CSS?
Solução
Desde que o CSS3 foi introduzido, a melhor maneira de adicionar cantos arredondados usando CSS é usando o border-radius propriedade.Você pode leia as especificações na propriedade, ou obter algum informações úteis de implementação no MDN:
Se você estiver usando um navegador que não implemento border-radius (Chrome pré-v4, Firefox pré-v4, IE8, Opera pré-v10.5, Safari pré-v5), os links abaixo detalham várias abordagens diferentes.Encontre um que se adapte ao seu site e estilo de codificação e siga em frente.
Outras dicas
Eu olhei para isso no início da criação do Stack Overflow e não consegui encontrar qualquer método de criar cantos arredondados que não me deixavam com a sensação de ter acabado de passar por um esgoto.
border-radius:
É exatamente assim que você gostaria que funcionasse.Embora isso funcione bem nas versões mais recentes do Safari e Firefox, mas não no IE7 (e não acho que no IE8) ou no Opera.
Enquanto isso, são hacks até o fim.Estou interessado em saber o que outras pessoas acham que é a maneira mais limpa de fazer isso no IE7, FF2/3, Safari3 e Opera 9.5 no momento.
Geralmente obtenho cantos arredondados apenas com css; se o navegador não suportar, eles verão o conteúdo com cantos planos.Se os cantos arredondados não são tão críticos para o seu site, você pode usar as linhas abaixo.
Se você quiser usar todos os cantos com o mesmo raio, esta é a maneira mais fácil:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
mas se você quiser controlar todos os cantos isso é bom:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
Como você pode ver em cada conjunto, você tem estilos específicos do navegador e nas quartas linhas declaramos de maneira padrão, por isso assumimos se no futuro os outros (espero que o IE também) decidam implementar o recurso para que nosso estilo esteja pronto para eles também.
Conforme dito em outras respostas, isso funciona perfeitamente no Firefox, Safari, Camino, Chrome.
Se você estiver interessado em criar cantos no IE, isso pode ser útil - http://css3pie.com/
Eu recomendaria usar imagens de fundo.As outras maneiras não são tão boas:Sem anti-aliasing e marcação sem sentido.Este não é o lugar para usar JavaScript.
Como Brajeshwar disse:Usando o border-radius seletor css3.Agora você pode se inscrever -moz-border-radius e -webkit-border-radius para navegadores baseados em Mozilla e Webkit, respectivamente.
Então, o que acontece com o Internet Explorer?A Microsoft tem muitos comportamentos para fazer com que o Internet Explorer tenha alguns recursos extras e obtenha mais habilidades.
Aqui:a .htc arquivo de comportamento para obter round-corners de border-radius valor em seu CSS.Por exemplo.
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
É claro que o seletor de comportamento não é um seletor válido, mas você pode colocá-lo em um arquivo css diferente com comentários condicionais (apenas para IE).
Com o suporte para CSS3 sendo implementado em versões mais recentes do Firefox, Safari e Chrome, também será útil dar uma olhada em “Border Radius”.
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Como qualquer outra abreviação CSS, o texto acima também pode ser escrito em formato expandido e, assim, obter diferentes raios de borda para o canto superior esquerdo, superior direito, etc.
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
jQuery é a maneira como eu lidaria com isso pessoalmente.o suporte css é mínimo, as imagens são muito complicadas, ser capaz de selecionar os elementos que você deseja que tenham cantos arredondados no jQuery faz todo o sentido para mim, embora alguns sem dúvida argumentem o contrário.Há um plugin que usei recentemente para um projeto em andamento aqui: http://plugins.jquery.com/project/jquery-roundcorners-canvas
Sempre existe o método JavaScript (veja outras respostas), mas como é puramente estilo, sou contra o uso de scripts de cliente para conseguir isso.
A forma que eu prefiro (embora tenha seus limites), é usar 4 imagens de cantos arredondados que você irá posicionar nos 4 cantos da sua caixa usando CSS:
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.png');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
Como mencionado, tem seus limites (o fundo atrás da caixa arredondada deve ser liso, caso contrário os cantos não combinarão com o fundo), mas funciona muito bem para qualquer outra coisa.
Atualizada: Melhorou a implementação usando uma sprite sheet.
Pessoalmente, gosto mais desta solução, é um .htc para permitir que o IE renderize bordas curvas.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
No Safari, Chrome, Firefox > 2, IE > 8 e Konquerer (e provavelmente outros) você pode fazer isso em CSS usando o border-radius propriedade.Como ainda não faz parte oficialmente das especificações, use um prefixo específico do fornecedor...
Exemplo
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
As soluções JavaScript geralmente adicionam um monte de pequenos divs para fazer com que pareça arredondado ou usam bordas e margens negativas para fazer cantos entalhados de 1px.Alguns também podem utilizar SVG no IE.
IMO, o modo CSS é melhor, pois é fácil e será degradado normalmente em navegadores que não o suportam.É claro que este é apenas o caso em que o cliente não as aplica em navegadores não suportados, como IE <9.
Aqui está uma solução HTML/js/css que fiz recentemente.Há um erro de arredondamento de 1px com posicionamento absoluto no IE, então você deseja que o contêiner tenha um número par de pixels de largura, mas é bem limpo.
HTML:
<div class="s">Content</div>
jQuery:
$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');
CSS:
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
A imagem tem apenas 18px de largura e todos os 4 cantos juntos.Parece um círculo.
Observação:você não precisa do segundo invólucro interno, mas gosto de usar margem no invólucro interno para que as margens dos parágrafos e títulos ainda mantenham o colapso das margens.Você também pode pular o jquery e apenas colocar o wrapper interno no html.
Como uma indicação de quão complexo é fazer com que os cantos arredondados funcionem, mesmo Yahoo os desencoraja (veja o primeiro ponto com marcador)!É verdade que eles estão falando apenas de cantos arredondados de 1 pixel naquele artigo, mas é interessante ver que mesmo uma empresa com sua experiência concluiu que eles são muito chatos para fazê-los trabalhar a maior parte do tempo.
Se o seu projeto sobreviver sem eles, essa é a solução mais fácil.
Claro, se for uma largura fixa, é super fácil usar CSS e nada ofensivo ou trabalhoso.É quando você precisa escalar em ambas as direções que as coisas ficam agitadas.Algumas das soluções têm uma quantidade impressionante de divs empilhados uns sobre os outros para que isso aconteça.
Minha solução é ditar ao designer que se ele quiser usar cantos arredondados (por enquanto), ele precisa ter uma largura fixa.Os designers adoram cantos arredondados (eu também), então acho que esse é um compromisso razoável.
Fronteiras Ruzee é a única solução de canto arredondado anti-alias baseada em Javascript que descobri que funciona em todos os principais navegadores (Firefox 2/3, Chrome, Safari 3, IE6/7/8) e TAMBÉM a única que funciona quando ambos os elemento arredondado E o elemento pai contém uma imagem de fundo.Ele também faz bordas, sombras e brilho.
O mais novo RUZEE.ShadedBorder é outra opção, mas não possui suporte para obter informações de estilo do CSS.
Se você optar pela solução border-radius, existe este site incrível para gerar o css que o fará funcionar para safari/chrome/FF.
De qualquer forma, acho que seu design não deveria depender de cantos arredondados, e se você olhar o Twitter, eles apenas dizem F **** para os usuários do IE e do Opera.É bom ter cantos arredondados, e pessoalmente estou bem em mantê-los para os usuários legais que não usam o IE :).
Agora é claro que não é a opinião dos clientes.Aqui está o link : http://border-radius.com/
Além das soluções HTC mencionadas acima, aqui estão outras soluções e exemplos para alcançar cantos arredondados no IE.
Não existe “o melhor” caminho;existem maneiras que funcionam para você e outras que não.Dito isso, postei um artigo sobre a criação de uma técnica de canto arredondado fluido baseada em CSS + imagem aqui:
Caixa com Cantos Arredondados Usando CSS e Imagens - Parte 2
Uma visão geral desse truque é aquela que usa DIVs aninhados e repetição e posicionamento de imagem de fundo.Para layouts de largura fixa (altura extensível de largura fixa), você precisará de três DIVs e três imagens.Para um layout de largura fluida (largura e altura extensíveis), você precisará de nove DIVs e nove imagens.Alguns podem considerar isso muito complicado, mas IMHO é a solução mais elegante de todos os tempos.Sem hacks, sem JavaScript.
Escrevi um artigo no blog sobre isso há algum tempo, então, para mais informações, Veja aqui
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
Funciona muito bem.Não é necessário Javascript, apenas CSS e HTML.Com o mínimo de HTML interferindo nas outras coisas.É muito semelhante ao que Mono postou, mas não contém nenhum hack específico do IE 6 e, após verificação, parece não funcionar.Além disso, outro truque é tornar transparente a parte interna de cada imagem do canto para não bloquear o texto próximo ao canto.A parte externa não deve ser transparente para poder cobrir a borda do div não arredondado.
Além disso, uma vez que CSS3 é amplamente suportado com border-radius, essa será a melhor maneira oficial de fazer cantos arredondados.
Não use CSS, o jQuery foi mencionado diversas vezes.Se você precisar de controle total do fundo e da borda dos seus elementos, dê oPlug-in de tela de fundo jQuery uma tentativa.Ele coloca um elemento HTML5 Canvas no fundo e permite desenhar qualquer plano de fundo ou borda que desejar.Cantos arredondados, gradientes e assim por diante.
O Opera ainda não suporta border-radius (aparentemente estará no lançamento após a versão 10).Enquanto isso, você pode use CSS para definir um plano de fundo SVG para criar um efeito semelhante.
