Cómo hacer redondeado Divs uso de CSS

Cómo hacer redondeado Divs uso de CSS


Antes de navegadores convirtieron compatible con la propiedad "border-radius" de hojas de estilo en cascada (CSS), los diseñadores necesitan para cortar esquinas en programas de edición de gráficos, y luego aplicarlos a las páginas Web utilizando complicados trucos de diseño. Con "border-radius", usted puede hacer DIVs redondeadas con sólo una o dos líneas de código y no hay imágenes. Usted puede incluso cambiar la forma de las esquinas redondeadas y aplicar un redondeo diferente a cada esquina de un DIV.

Instrucciones

1

Abra el archivo HTML en un editor de código como jEdit, Notepad ++ o BBEdit. Escriba "<div>" etiquetas en su código como este:

<Div> </ div>

Llene el contenido entre los "<div>" etiquetas. Usted puede colocar cualquier contenido que quieras, como imágenes y texto.

2

Añadir un atributo ID para su apertura "<div>" etiqueta. Utilice el ID de darle a su DIV un nombre único y significativo. No puede utilizar un identificador más de una vez en la misma página Web sin causar problemas de diseño cuando intenta orientar el ID de CSS. Agregue el atributo ID como esto:

<Div id = "redondeada"> Su contenido ... </ div>

3

Desplazarse hacia arriba en el archivo HTML y buscar "<link>" o "<style>" etiquetas. Abra un archivo CSS referenciados por un "<link>" etiqueta y añadir su código CSS allí. Si sólo se encuentra "<style>" etiquetas, a continuación, agregue el código CSS entre esas etiquetas. Usted puede agregar las etiquetas a ti mismo, también, entre los "<head>" etiquetas.

4

Escriba un selector - código para "seleccionar" un elemento HTML - para orientar su DIV por su nombre de identificación. Añadir la propiedad "border-radius" entre sus llaves y la puso a un valor de píxel. El código es el siguiente:

redondeada {border-radius: 10px;}

Valores de radio más altos hacen DIVs más redondeado, mientras que los valores más bajos crean un efecto más sutil redondeo.

5

Agregar una longitud de radio para cambiar la forma de la curva de la siguiente manera:

redondeada {border-radius: 20px 10px;}

El ejemplo anterior muestra la frontera de un radio de esquina de 10 píxeles, y establece el ancho de la esquina de veinte píxeles.

6

Dé a cada rincón de su propio estilo "border-radius" como esto:

redondeada {

border-top-izquierda-radio: 10px;

border-top-right-radius: 20px;

border-bottom-izquierda-radio: 30px;

border-bottom-right-radius: 40px;

}

Consejos y advertencias

  • Ajuste el "border-radius" a un valor mayor que el valor de relleno del DIV hacer las esquinas interiores redondeadas cuando se aplica un borde grueso.
  • A partir de mayo de 2011, todos los navegadores soportan "border-radius" sin el uso de prefijos de proveedores. No es necesario añadir propiedades tales como "-webkit-border-radius" para hacer esquinas redondeadas funcionan.