All Articles Web
Creado esquinas redondeadas en Objetos de diseño en CSS3
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

Si usted no ha estado haciendo mucho leyendo todavía sobre lo que hay de nuevo en CSS3 , es bastante impresionante. Hay todo tipo de posibilidades de reciente introducción, incluyendo gradientes, varias columnas, las imágenes de fronteras, y un hablaremos un vistazo a este, el radio de la frontera. Radio de la frontera nos permite configurar las esquinas redondeadas de otro modo los objetos rectangulares en los diseños de nuestra web.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

Paso 1 - Aplicación de un Radio Frontera CSS3

En primer lugar, vamos a aplicar radio de frontera. En su hoja de estilo, encontrar la regla que desea aplicar el efecto de esquinas redondeadas para. A menudo, esto va a ser un selector ID que es el control de un elemento div. Asegúrese también de que usted también está aplicando un color de fondo o un borde (o ambos) para que pueda ver las esquinas!

A continuación, agregue el "radio de frontera", propiedad a su estado, seguido de un valor. Cuanto más alto sea el valor que se utilice, más la vuelta a la esquina.

Aquí, estoy solicitando el radio de la frontera a mi # Contenido selector ID, que es el control de la div que contiene el contenido de mi página, como se puede ver en la captura de pantalla incluidos. Asegúrese de guardar su trabajo y ver tu trabajo en tu navegador.

Si usted todavía está recibiendo las esquinas de 90 grados, entonces el navegador es uno que no es compatible con esta función. Sin embargo, no tienen necesidad de empacar las cosas en el momento. Vamos a ver que buen truco que he mencionado antes.

Paso 2 - Garantías de efecto esquina redondeada Obras

Como se mencionó, sólo las últimas versiones de los navegadores más populares de la propiedad CSS3 la frontera de radio. Entonces, ¿cómo se puede asegurar que el diseño funciona para los usuarios que siguen utilizando los navegadores que son una versión o detrás de los dos? Puede utilizar un código adicional, de la siguiente manera.

En primer lugar, vamos a añadir en "-moz-border-radius:" seguido por un valor de radio. Este objetivo lo que se conoce como navegadores Gecko - sobre todo de Firefox.

A continuación, vamos a añadir en "-webkit-border-radius:", seguido por el mismo valor que hemos utilizado anteriormente. Esto va a golpear a todos los navegadores basados ​​en WebKit, al igual que Chrome y Safari. Una vez añadido, salvar su trabajo y la actualización de su navegador.

Paso 3 - La excepción confirma la regla

Ahora ¿qué pasa con Internet Explorer, el navegador favorito de todos los diseñadores web (sic), te preguntarás? Bueno, todas las opciones anteriores no funcionan. De hecho, el código que hemos añadido a este punto serán ignorados por el Explorer, y las esquinas, simplemente se hacen en su defecto de 90 grados estilo, que es mejor que tener que romper, ¿no? Es posible que salga de las esquinas redondeadas en IE, pero sabemos que es un poco de trabajo extra, y tal vez eso es algo que podría conseguir en el futuro en una punta. Por el momento, sin embargo, disfrutar de sus esquinas redondeadas en todos los otros navegadores!

CSS es una maravilla. Descubra más sobre diseño flotante diseños de CSS .


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: