Cómo hacer una frontera de la curva de HTML para un Div

Uno de los desarrollos más interesantes en CSS3 es la capacidad de diseñar las fronteras de lujo. Con las hojas de estilo, ahora puede crear bordes con esquinas redondeadas, bordes de la imagen y las fronteras con un efecto de sombra. Estas fronteras de lujo permiten al diseñador web para escapar de la monotonía de las líneas rectas y el texto de ayuda se destacan de un fondo plano.

Instrucciones

1 Abra la hoja de estilos vinculada a sus documentos HTML. Si aún no lo ha hecho uno, crear un nuevo archivo de texto y guardarlo como un archivo CSS como "style.css" sin las comillas. Abra la hoja de estilos en un editor HTML o texto.

2 Escriba la siguiente regla CSS para la etiqueta DIV. Tenga en cuenta que la parte "div" es el selector; las llaves encierran estas declaraciones.

div {}

3 Introduzca las siguientes declaraciones para establecer los estilos de borde. La primera declaración es una taquigrafía CSS que define la frontera grosor, estilo y color, respectivamente. Cambiar los valores para aplicar los estilos que desea. La segunda línea determina la cantidad de la curva voluntad frontera. Cuanto mayor sea el número, mayor es la cantidad de curva. Una declaración adicional en la parte inferior se puede añadir para asegurar la compatibilidad con Firefox 3.6 y versiones anteriores.

div

{

frontera: 1px solid # a0a0a0;

la frontera de radio: 15px;

-moz-border-radius: 15px;

}

4 Añadir las declaraciones a continuación para ajustar el ancho del borde, color de fondo y el relleno. El relleno crea un espacio entre el texto y las líneas fronterizas. Cambiar los valores de color y el tamaño que necesita.

padding: 20px 40px;

fondo: amarillo;

Anchura: 350px;

5 Guarde el archivo de hoja de estilo. Toda la regla CSS para la etiqueta DIV debe ser similar a la siguiente:

div

{

frontera: 1px solid # a0a0a0;

la frontera de radio: 15px;

-moz-border-radius: 15px;

padding: 20px 40px;

fondo: amarillo;

Anchura: 350px;

}

6 Vincular la hoja de estilo a sus documentos HTML si no lo ha hecho ya. Inserte el siguiente código entre las etiquetas HEAD de cada página Web en la que "xxx.css" es el nombre de su archivo CSS.

<Link rel = "stylesheet" type = "text / css" href = "style.css" />

Consejos y advertencias

• Si no desea que el borde tiene una línea visible, omitir la primera declaración de "frontera". Tenga en cuenta que si no se utiliza una línea fronteriza, la caída de imagen Frontera de la sombra o, debe utilizar un color de fondo. De lo contrario el DIV sería invisible.