Hojas de Estilo en Cascada (CSS) de nivel tres - más conocido como CSS3 - da diseñadores Web la capacidad de crear muchos efectos visuales que antes requerían complicadas rebanar imágenes. En lugar de cortar las imágenes en un editor de gráficos y su aplicación a las páginas Web, ahora puede usar unas pocas líneas de código CSS. Esquinas redondeadas, por ejemplo, sólo requieren la propiedad "border-radius". El uso inteligente de esta propiedad puede crear una variedad de formas, incluyendo círculos. Utilice la propiedad "border-radius" en CSS para crear esquinas redondeadas en casi cualquier elemento HTML.
Instrucciones
Prepare a su código HTML
1
Crear un nuevo archivo HTML en un editor de código o el Bloc de notas. Copia y pega este código en el archivo:
<Html>
<Head>
<Title> Esquinas Tutorial </ title>
</ Head>
<Body>
</ Body>
</ Html>
2
Añadir un par de etiquetas div entre las etiquetas del cuerpo de su archivo HTML. Dar la div un nombre de identificación. El código para su div debería tener este aspecto:
<Div id = "redondeado"> </ div>
3
Añadir un par de etiquetas de estilo después de las etiquetas de título en la cabeza de su archivo HTML. He aquí un ejemplo de etiquetas de estilo:
<Style type = "text / css"> </ style>
Aplicar esquinas redondeadas uso de CSS
4
Crear una línea en blanco entre las etiquetas de estilo y agregar el siguiente código:
redondeada {}
Reemplazar "redondeada" con el nombre que le dio el div.
5
Establezca la propiedad "border-radius" a un valor de píxel de su elección. El valor del radio de su frontera determina la cantidad de redondeo que los navegadores se aplican a su div. He aquí un ejemplo:
redondeada {
border-radius: 10px;
}
6
Dé a cada esquina un tamaño curva diferente estableciendo la propiedad "border-radius" para cada uno. Así es como se ve el código:
redondeada {
border-top-izquierda-radio: 10px;
border-top-right-radius: 15px;
border-bottom-izquierda-radio: 20px;
border-bottom-right-radius: 25px;
}
7
Extiende las esquinas redondeadas mediante la adición de valores "longitud" a sus propiedades "border-radius". Aquí está el código:
border-top-izquierda-radio: 100px 50px;
El valor "longitud" es de 100 píxeles y el radio se establece en 50 píxeles. Esto crea una curva que es más largo que alto. Invierta los valores para crear una curva que es más largo que ancho.
Consejos y advertencias
- También puede establecer propiedades "border-radius" a los valores porcentuales. Aplicar "border-radius: 50%;" dar vuelta a su div en un círculo.
- Aplicar propiedades "border-radius" a cualquier elemento HTML que desea. En lugar de crear un div, considere la posibilidad de redondear las esquinas de las partidas o incluso imágenes.
- Estos códigos de CSS3 no funcionará en los navegadores más antiguos, incluyendo Internet Explorer 8 y por debajo. Considere el uso de un retorno basado en imágenes o JavaScript para aquellos navegadores o permitir que los usuarios de estos navegadores para ver esquinas afiladas en su lugar.