Editar

<p style="float: right; padding-left: 5px;"><img src="http://farm5.static.flickr.com/4053/4613673930_329f82bf37_o.png" alt="" /></p> <p><span>Ya que el CSS3 s&oacute;lo est&aacute; disponible en algunos navegadores y la propiedad border-radius es parte de ella, no podemos utilizarla si queremos que nuestro sitio web se vea estupendo en todos los navegadores.</span></p> <p><span>Es por ello que utilizamos t&eacute;cnicas CSS (versi&oacute;n 2.1) junto con alguna imagen para provocar el efecto de las esquinas redondeadas sin sufrir tanto.</span></p> <p><span>Mi t&eacute;cnica se las mostrar&eacute; a continuaci&oacute;n m&aacute;s unos ejemplos bien completos y concretos donde podr&aacute;n ver y analizar el c&oacute;digo CSS.</span></p> <p><span>Bien, yo utilizo <strong>una sola imagen</strong>, <strong>6 divs del HTML</strong> y porsupuesto que <strong>CSS</strong>. Quiz&aacute;s sean demasiados divs, pero no encuentro otro m&eacute;todo m&aacute;s simple, adem&aacute;s, no interfiere en el funcionamiento. Lo bueno es que utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tama&ntilde;o de la mitad de la imagen m&aacute;s un color de fondo, y el &uacute;ltimo cubre 1/2 de las partes de las imagenes restantes&nbsp;con un margen negativo superior e inferior con las mismas caracter&iacute;sticas del anterior.</span></p> <p><span>Se puede interpretar de la siguiente forma:<br /></span></p> <p><span><img src="http://farm5.static.flickr.com/4044/4613539125_2a4ea36137_o.png" alt="" /></span></p> <p><span>En general, <strong>los &uacute;ltimos dos divs son los encargados de cubrir 3/4 de la imagen posicionada en cada esquina</strong> (contenida en los 4 divs anteriores).</span></p> <p><span>Y as&iacute; se puede crear el efecto de las esquinas redondeadas que <strong>funciona en todos los navegadores</strong> (hasta en IE 5.5) con ventajas de agregar bordes CSS, a partir de 6 divs, una sola imagen m&aacute;s un poco de estilo. Creo que es mejor esto en vez de usar 4 divs y una imagen para cada uno como he visto y experimentado en otros ejemplos: menos peticiones para el servidor, </span><span>menor tiempo de carga</span><span>.<br /></span></p> <p><span>Puedes ver </span><a href="../ejemplos/esquinas-redondeadas-css/"><span>una presentaci&oacute;n que he creado con 4 tipos de cajas de esquinas redondeadas</span></a><span>.<br /></span></p>

o salir