Ha llegado el momento de mi primer publicación, espero que les sea de utilidad...
Desde mi punto de vista, border-radius, con un buen manejo puede darnos muchas posibilidades gráficas, es sencillo y potente.
Border-radius nos permite usar esquinas redondeadas en los elementos, antiguamente (por decirlo de alguna manera) debíamos crear una imagen para lograr este mismo efecto, pero con la inclusión y desarrollo de esta propiedad, ya no es necesario. La forma abreviada es:
Border-radius: value;
En este caso, “value” es el valor introducido que se aplicará a cada una de esquinas de nuestro elemento. Es importante
destacar que los valores aceptables pueden estar representados en porcentajes o pixeles.
La propiedad border-radius es compatible con IE9 +, Firefox 4 +, Chrome, Safari
5 + y Opera.Veamos dos ejemplos:
 |
Pero las maravillas de border-radius noquedan aquí… he mencionado que la forma anteriormente descripta es la forma abreviada, pero nos da muchas más posibilidades.
Podríamos asignarle un valor diferente a cada una de las esquinas,
para esto, debemos introducir los cuatro valores, border-radius los asignará al elemento comenzando por la esquina superior izquierda y continuando en el sentido horario.
Border-radius:sup_izq(A), sup_der(B), inf_der(C), inf_izq(D);
También podríamos definir
cada esquina de manera individual:
Un
ejemplo sencillo podría ser:
Hay que tener en cuenta que si (en laforma abreviada) se omite el valor de la esquina inferior izquierda, se le atribuirá el valor de la esquina superior derecha, de igual modo, si la esquina inferior derecha se omite el valor de radius será el de la esquina superior izquierda. Si se indica solo un valor, este se utilizará para todas las esquinas.
En esta artículo se ha presentado a border-radius de una manera sencilla y sin demasiadas complicaciones, en el articulo siguiente conoceremos un poco
más de border-radius.
No hay comentarios:
Publicar un comentario