Cómo hacer Div redondeado y Cajas confinado en el Código CSS

Los desarrolladores web utilizan CSS (Cascading Style Sheets) como un método para aplicar efectos visuales a las páginas Web. Como las capacidades de CSS se expanden, los desarrolladores pueden descartar más de sus hacks de imágenes y otras técnicas torpes a cambio de efectos visuales de código solamente. Esquinas redondeadas, introducidos como parte de CSS nivel 3 (CSS3), representan uno de estos avances. Sin rebanar imagen difícil y codificación incómoda, puede aplicar esquinas redondeadas a cualquier elemento HTML, incluyendo divs. Cuando se agrega un borde a la div redondeada, también verá la frontera se convierte redondeado.

Instrucciones

1

Abra un archivo HTML en el Bloc de notas o un editor de código y comprobar que el código incluye "<style>" etiquetas:

<Style type = "text / css">

</ Style>

Añadir las siguientes etiquetas si usted no los encuentra en el código.

2

Abra un archivo HTML en el Bloc de notas o un editor de código y comprobar que el código incluye "<style>" etiquetas:

<Style type = "text / css">

</ Style>

Añadir las siguientes etiquetas si usted no los encuentra en el código.

3

Ir a su "<style>" etiquetas y añadir una regla de estilo para la caja:

box {

}

Cambiar "caja" al nombre ID que encontró dentro de las "<div>" etiquetas. Siempre anteponer sus nombres de identificación con símbolos de hash en CSS.

4

Añadir la propiedad "border-radius" a su regla de estilo:

box {

border-radius: 25px;

}

Este código crea un radio de frontera 25 píxeles para cada rincón de la div. Puede especificar esquinas individuales utilizando propiedades denominadas "border-top-izquierda-radio" y así sucesivamente.

5

Dele a su cuadro una frontera mediante la propiedad "frontera":

box {

border-radius: 25px;

frontera: 10px púrpura sólido;

}

Esta es una propiedad abreviada que tiene tres valores: el ancho, estilo y color. Use nombres de colores, códigos hexadecimales o RGBA (Rojo, Verde, Azul, Alpha) códigos de fijar los colores de las fronteras. Ajuste el ancho de la frontera a un valor menor que el radio frontera para mantener esquinas interiores redondeadas.

Consejos y advertencias

  • Cambiar la forma de una curva mediante la adición de un segundo valor a "border-radius". El primer valor se convierte en la longitud de la curva, mientras que el segundo se convierte en la altura: "border-radius: 25px / 50px;"