css - content - El radio del borde del webkit a veces tiene efecto.

css content

Question

Este problema es sobre la propiedad de radio de borde 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 esta URL, he redondeado divs que parecen estar redondeados 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 está formateado correctamente, así que no tengo ni idea de cuál es el problema.

Answer 1

¿No necesita aplicar una propiedad de borde o ancho de borde, así como las distintas propiedades de radio de borde?

Además, he notado que Safari deja caer el radio por encima de ciertos valores de radio. Prueba a reducir los valores de píxeles y observa qué sucede.

Answer 2

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

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

(nota al margen, no debes usar la misma ID para varios elementos HTML. Debes usar clase en su lugar, y ajustar tu selector CSS para que diga .round en lugar de #round.)

Answer 3

Para cualquiera que se refiera a esto por ayuda con esquinas redondeadas, estoy de acuerdo con la respuesta de Jacob con respecto a Webkit, pero la pregunta también mencionó que Chrome no funciona. Chrome utiliza esquinas redondeadas CSS3 estándar que son exactamente como las de Webkit, pero sin el anterior ''-webkit-'' en la regla. Estos son los siguientes:

border-bottom-right-radius:2px;

Para tener en cuenta Firefox, Webkit y Chrome, deberías 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 reglas CSS3 y son compatibles con Chrome. Esta es una buena manera de obtener esquinas redondeadas en IE usando algo como CSS3Pie: http://css3pie.com/

Answer 4

tipo simple solo uso:

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

dónde:

border-radius:top right bottom left;