radio frontera webkit veces surte efecto

Question

Este problema se trata de la propiedad de la frontera de radio CSS3 ( http: // www.css3.info/border-radius-apple-vs-mozilla/ )

Un ejemplo de este problema está aquí:

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

En este URL, he redondeado divs que parecen ser redondeada en FF3, pero en Safari y Chrome las esquinas redondeadas no están allí.

El estilo es el siguiente:

-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;

Estoy bastante seguro de que este CSS tiene el formato correcto, así que estoy desorientado en cuanto a cuál es el problema.

Answer 1

El problema parece estar en la radia 92px. Parece que el radio máximo que el 20 pixels de alto div puede manejar es 18px. No es necesariamente obvio lo que significa un radio de 92 píxeles en ese caso. Sin embargo, puede especificar tanto una X y el radio Y el uso de algo como esto:

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

(nota al margen, no debe utilizar el mismo ID de varios elementos HTML. Se debe utilizar en lugar de clase, y ajustar su selector CSS por lo que dice .round en lugar de #round.)

Answer 2

Para cualquier referencia a esto para obtener ayuda con las esquinas redondeadas, estoy de acuerdo con la respuesta de Jacob con respecto Webkit, pero la pregunta también mencionado Chrome no funciona. Chrome utiliza el estándar CSS3 esquinas redondeadas que son exactamente igual de Webkit, pero sin el precedente '-webkit-' en la regla. Estos son los siguientes:

border-bottom-right-radius:2px;

Para tener en cuenta Firefox, WebKit y Chrome, que había necesidad de hacer algo como esto:

-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;

El tercer conjunto de reglas son las reglas CSS3 y están soportados por Chrome. Esta es una buena manera de conseguir también esquinas redondeadas en IE usando algo como CSS3Pie: http://css3pie.com/

Answer 3

No es necesario aplicar una propiedad frontera o border-width, así como las diversas propiedades de la frontera de radio?

Además, me he dado cuenta de Safari elimina el radio por encima de ciertos valores de radio -. Intente reducir los valores de los píxeles y ver lo que sucede

Answer 4

tipo simple sólo tiene que utilizar:

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

donde:

border-radius:top right bottom left;