miércoles, 2 de febrero de 2011

Bordes Redondeados


La propiedad border-radius es la que nos permite "redondear" los bordes de casi cualquier un objeto:
-moz-border-radius: 10px; // en Firefox
-webkit-border-radius: 10px; // en Chorme y Safari
border-radius: 10px; // la propiedad según al w3.org


No es necesario que se redondeen los cuatro lados; funciona de manera similar a la propiedad border así que el orden es el mismo: arriba/izquierda arriba/derecha abajo/derecha y abajo izquierda así que podemos poner cuatro valores distintos:
-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px 40px;



si ponemos un solo valor: -moz-border-radius: 10px;

será lo mismo que escribir: -moz-border-radius: 10px 10px 10px 10px;



si ponemos dos valores:-moz-border-radius: 20px 5px;

será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;



si ponemos tres valores: -moz-border-radius: 20px 5px 20px;

será lo mismo que escribir: -moz-border-radius: 20px 5px 20px 5px;



Además, cada uno de ellos tiene una propiedad especial que también puede ser utilizada:




-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft

-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius

border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius



Ahora bien, cuando pensamos en esto, nos imaginamos "círculos", obviamente, la palabra radius nos indica eso, el valor que le ponemos es el valor del radio de un círculo; tanto es así que podemos crear un círculo casi perfecto.



Si tenemos un elemento que mide 100x100 y le ponemos a border-radius un valor de 50, el resultado será esto:





Pero eso no es todo, en realidad, border-radius es una propiedad que también permite crear elipses y para eso, separamos los valores con una barra inclinada; por ejemplo:
-moz-border-radius: 20px / 5px;
-webkit-border-radius: 20px / 5px;
border-radius: 20px / 5px;


En esos casos, el primer valor es el radio horizontal y el segundo, el radio vertical.






















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional

Archivo del blog