Cómo aplicar el efecto de la frontera de radio css3

El efecto CSS3 border-radius define esquinas redondeadas. Y, es necesario utilizar prefijos específicas del navegador cuando se define un radio de frontera. Aquí algunas reglas para la definición de un radio de frontera:

• No se puede aplicar un radio de borde a un selector (un estilo CSS) que no tiene tampoco una altura o anchura (al menos uno o el otro) definido.

• La propiedad básica de un radio de frontera, en CSS3 es la frontera de radio, seguido de un valor. Por ejemplo, border-radius: 12px; crea esquinas redondeadas en las cuatro esquinas del elemento al que se aplica. Y el " redondeo " de esas esquinas se extenderá por 12 píxeles desde las esquinas.

• Puede definir radios separado para cada esquina de una frontera. Por ejemplo:

border-top-left;radius:1px;border-top-right;radius:2px;border-bottom-right;radius:3px;border-bottom-left;radius:4px;

Tomemos el siguiente ejemplo: un estilo de clase que define ambas fronteras y radios fronterizas. El siguiente estilo CSS crea una .fronteras clase que se aplica tanto a las fronteras y radios de frontera a cualquier elemento al que se aplica:

.fronteras {border: 12px sólido gray-border-top-left;radius:48px;border-top-right;radius:24px;border-bottom-right;radius:12px;border-bottom-left;radius:6px;padding: 12px;}

El resultado del código anterior, como se muestra en el navegador Chrome, muestra el selector de clase (estilo) con un borde definido y propiedades radios fronteras definidas.

El código de esquina redondeada (border-radius) funciona bien en las versiones contemporáneas de IE y Chrome, porque los navegadores no requieren un prefijo para este efecto. Pero para hacer el trabajo border-radius en Mozilla Firefox, los navegadores WebKit como Safari (para escritorio / portátil y móvil), y algunas versiones de Opera, que tienes que hacer tres copias del código de la frontera de radio con los prefijos apropiados, como este:

.fronteras {border: 12px sólido gray-border-top-left;radius:48px;border-top-right;radius:24px;border-bottom-right;radius:12px;border-bottom-left;radius:6px;-moz-border-top-left;radius:48px;-moz-border-top-right;radius:24px;-moz-border-bottom-right;radius:12px;-moz-border-bottom-left;radius:6px;-webkit-border-top-left;radius:48px;-webkit-border-top-right;radius:24px;-webkit-border-bottom-right;radius:12px;-webkit-border-bottom-left;radius:6px;-o-border-top-left;radius:48px;-o-border-top-right;radius:24px;-o-border-bottom-right;radius:12px;-o-border-bottom-left;radius:6px;padding: 12px;}

Sólo con cuatro versiones de la definición de estilo CSS es que esto funciona frontera, en todos los principales navegadores, actuales.

La gente viendo la página en los navegadores antiguos tienen que renunciar a la mayor experiencia de diseño que obtendrían si estuvieran viendo la página en un navegador actual generación. Pero debido a que el efecto CSS3 no es un requisito para ver el contenido real de la página, es todavía accesible (y en este ejemplo, la frontera sigue apareciendo).