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

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / Páginas web de construcción

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.

imagen0.jpg

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).



Artículos Relacionados

Sobre el autor
Las nuevas técnicas de frontera css3 Las nuevas técnicas de frontera css3

Fronteras han sido parte de la CSS desde el principio, pero CSS3 añade algunos nuevos muy interesantes opciones. Los navegadores modernos soportan ahora las fronteras hechas de una imagen, así como las esquinas redondeadas y la caja de sombras.…

La conversión de nombres de propiedades CSS para javascript La conversión de nombres de propiedades CSS para javascript

Puede convertir nombres de las propiedades CSS para javascript. Sin embargo, hay algunas cosas que usted debe recordar si usted planea en hacer esto. Al cambiar de estilos con javascript, hay un par de reglas simples:Si la propiedad CSS es…

javascript para los niños para los maniquíes javascript para los niños para los maniquíes

Puede convertir nombres de las propiedades CSS para javascript. Sin embargo, hay algunas cosas que usted debe recordar si usted planea en hacer esto. Al cambiar de estilos con javascript, hay un par de reglas simples:Si la propiedad CSS es…

Cómo añadir bordes a su sitio web en la pi de frambuesa Cómo añadir bordes a su sitio web en la pi de frambuesa

Puede utilizar el Raspberry Pi para poner un borde alrededor de diferentes partes de su página web, que es una buena manera de marcar dónde comienzan y terminan las partes, y para llamar la atención sobre los elementos más importantes. Usted…

¿Cómo crear una barra de navegación de una lista en la pi de frambuesa ¿Cómo crear una barra de navegación de una lista en la pi de frambuesa

En la parte superior de una página web es una lista de enlaces. ¿Quieres usar tu Raspberry Pi para convertirlos en una barra de navegación, un conjunto de botones horizontales. Pero sólo desea hacer esta lista una navbar- usted no desea afectar…

Cómo calcular el período y el radio orbital de un satélite geosincrónica Cómo calcular el período y el radio orbital de un satélite geosincrónica

Cuando un satélite viaja en una órbita geosíncrona alrededor de la Tierra, que necesita para viajar en un cierto radio orbital y el período para mantener esta órbita. Debido a que el radio y el periodo están relacionados, puede usar la física…

Box y fronterizas propiedades de las hojas de estilo en cascada (CSS) Box y fronterizas propiedades de las hojas de estilo en cascada (CSS)

Con las propiedades del cuadro, puede colocar objetos labrados en cualquier parte de una ventana del navegador, la posición de los objetos en relación con los demás objetos de la página, y aplicar las reglas de relleno y estilo de cuadro margen…

Soporte CSS3 y navegador Soporte CSS3 y navegador

El estado actual de las normas para la compatibilidad con exploradores web para efectos CSS3 y transformaciones es en flujo. Lo más probable, con el tiempo los poderes fácticos estar en el mundo del navegador - quienes publican Internet Explorer,…

Cómo crear un borde alrededor de una imagen en css3 Cómo crear un borde alrededor de una imagen en css3

Uno de los cambios más comunes que puede realizar en una imagen en CSS3 es añadir una frontera. Esto pone en marcha la imagen del otro contenido en la página. Por supuesto, CSS3 ofrece una amplia gama de tipos de fronteras. El truco es conseguir…

Cómo redondear los bordes y crear varias columnas con css3 Cómo redondear los bordes y crear varias columnas con css3

En lugar de tener que utilizar hasta cuatro imágenes separadas para dar la ilusión de una forma curvada en su sitio web, con CSS3 ahora puede crear contenedores con esquinas curvas! Aquí está el código, que cuenta con la declaración de CSS3…

Cómo el estilo de párrafos, encabezados y pies de página con css3 Cómo el estilo de párrafos, encabezados y pies de página con css3

Cuando se diseñará párrafos, encabezados y pies de página, la mayoría del trabajo se puede lograr de forma automática mediante la creación de estilos de etiquetas Redefinir para el etiqueta y sin embargo muchas etiquetas de título que va a…

Cómo el estilo de listas y tablas con css3 Cómo el estilo de listas y tablas con css3

Listas y tablas de estilo es un poco diferente de styling contenido en el cuerpo de la página, ya que ambas listas y tablas tienen etiquetas específicas que pueden ser redefinidas para controlar cómo el contenido se encuentra dentro de esas…

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