macuoren

… siguiendo con el post anterior:

Pues esta vez he visto mediante una plantilla para Wordpress (Aeros) que se puede utilizar este estilo en CSS para la visualización con navegadores con WebKit^[W], como son Safari, Chrome, Shiira…

La línea a poner es esta:

{
-webkit-border-radius: 20px;
}

Por lo que para un diseño que se vea lo mas próximo a la mayoría de navegadores posible se tendrían que poner los 3 atributos que conozco hasta ahora:

{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

Existe un “problema” entre el moz y el webkit, y es que al moz se le puede indicar un radio diferente para cada esquina, pero al webkit no, tienen que ser todas las esquinas iguales:

{
-moz-border-radius: 20px 0px 10px 30px; /* Sin problemas */
-webkit-border-radius: 20px 0px 10px 30px; /* IMPOSIBLE */
}

Esto me ha echo diseñar un poco diferente para cada motor, unos pantallazos lo aclararán:

MOZ

WEBKIT

Otra cosa: si te pasas de radio con moz con respecto a la altura o anchura de un contenedor, se reduce automáticamente, pero con webkit se elimina, por lo que en este último caso hay que poner el justo o menor, es cuestión de ir probando.

Y nada mas, c’est fini