Una de las características más populares de CSS3 es el atributo border-radius que le permite crear cuadros y botones con las esquinas redondeadas. Aunque puede crear efectos esquinas redondeadas mediante la creación de una imagen para cada esquina, estos toman tiempo para crear y añadir más marcado a la página. El atributo border-radius permite crear verdaderos esquinas redondeadas, que cualquiera de los navegadores más recientes pueden mostrar. Los navegadores más antiguos ignoran el atributo, que se degrada con gracia para mostrar las esquinas de la caja estándar.
Instrucciones
1
Abra una aplicación de diseño editor de texto o Web y crear una nueva página HTML.
2
Agregue el código siguiente a la línea antes del cierre "</ head>" tag:
<Style type = "text / css">
.rounded {
border: solid 2px #000;
border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
width: 200px; height: 40px;
}
</ Style>
Esto define una hoja de estilos CSS que contiene una clase llamada "redondeada". Dentro de esta clase, primero establece la frontera para el elemento objetivo, mediante una línea de negro sólido de 2 píxeles de grosor para este ejemplo. A continuación, se establece el radio de borde para las esquinas curvas, medido en píxeles. Cada navegador utiliza actualmente sus propios atributos, por lo que debe agregar moz-border-radius para Firefox, y -webkit-border-radius para los navegadores basados en WebKit, como Google Chrome y Safari. Por último, se puede establecer la anchura y la altura del elemento de destino.
3
Agregue el código siguiente después de la apertura de HTML "<body>" tag:
<Div class = "redondeado"> </ div>
Esto crea un bloque div HTML y aplica la clase redondeada para el peinado.
4
Guarde la página como "rounded.htm" y subirlo a su servidor Web. Inicie un navegador Web, a continuación, abra "rounded.htm" para ver la página. En los navegadores compatibles con CSS3 como Internet Explorer 9, Google Chrome 4.1 y Firefox 3.5 y superiores, el div es de estilo con las esquinas redondeadas. Versiones de navegadores anteriores que no soportan CSS3 mostrar una caja estándar.
5
Cambie el código CSS para la clase redondeada a lo siguiente:
.rounded {
border: solid 2px #000;
border-radius: 20px 30px 0px 20px;
-moz-border-radius: 20px 30px 0px 20px;
-webkit-border-radius: 20px 30px 0px 20px;
width: 200px; height: 40px;
}
Esto le permite establecer un valor de radio diferente para cada esquina, en este orden: arriba-izquierda, arriba-derecha, abajo a la derecha, abajo a la izquierda. Guarde la página y ver en su navegador para ver la nueva configuración en la acción, la creación de una caja con forma de burbuja, discurso.
Consejos y advertencias
- Usted puede hacer un número de diferentes formas al cambiar el radio de las esquinas individuales, con el fin de añadir estilo a un sitio web sin la adición de imágenes, que se suman al tiempo de carga de la página.