Webkit raio de fronteira, por vezes, entram em vigor

Question

Esta questão é sobre o CSS3 propriedade border-radius ( http: // www.css3.info/border-radius-apple-vs-mozilla/ )

Um exemplo desse problema é aqui:

http://jamtodaycdn.appspot.com/bin/rounded.html

Neste URL, tenho divs arredondadas que parecem ser arredondado em FF3, mas no Safari e Chrome os cantos arredondados não estão lá.

O estilo é o seguinte:

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

Estou bastante certo de que este CSS está formatado corretamente, então eu sou ignorante sobre o que é o problema.

Answer 1

O problema parece estar na radia 92px. Parece que o raio máximo que o 20-pixel de alta div pode suportar é 18px. Não é necessariamente óbvio o que um pixel 92 meios de raio nesse caso. No entanto, você pode especificar um X e raio Y usando algo parecido com isto:

-webkit-border-bottom-right-radius: 92px 18px;

(nota lateral, você não deve usar o mesmo ID para vários elementos HTML. Você deve usar a classe em vez disso, e ajustar o seletor CSS para que ele diz .round vez de #round.)

Answer 2

Para qualquer referência a este para ajudar com cantos arredondados, eu concordo com a resposta de Jacob sobre Webkit, mas a questão também mencionou Chrome não funciona. Chrome utiliza cantos arredondados CSS3 padrão que são exatamente como Webkit do, mas sem o anterior '-webkit-' na regra. Estas são as seguintes:

border-bottom-right-radius:2px;

Para ter em conta Firefox, Webkit e Chrome, você precisa fazer algo como isto:

-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

O terceiro conjunto de regras são regras CSS3 e são suportados pelo Chrome. Esta é uma boa maneira de também obter cantos arredondados no IE usando algo como CSS3Pie: http://css3pie.com/

Answer 3

Você não precisa de aplicar uma borda ou propriedade border-width, bem como as propriedades vários border-radius?

Além disso, tenho notado Safari deixar cair o raio acima de determinados valores de raio -. Tente reduzir os valores de pixel e ver o que acontece

Answer 4

tipo simples, apenas use:

border-radius:92px 92px 2px 2px;

Onde:

border-radius:top right bottom left;