Cómo crear bordes redondeados El uso de CSS

Por lo que desea un sitio web con buenos bordes redondos, pero no quiere meterse con la construcción de imágenes y subir a su servidor FTP, a continuación, la reconstrucción de estas imágenes para ajustarse a las tablas y gráficos de diferentes tamaños? Bueno, entonces tengo una solución para usted. El diseño web ha evolucionado lo suficiente a través de CSS (hojas de estilo en cascada) que ahora podemos poner fronteras redondas de los sitios sin subir ninguna imagen. en su lugar se puede utilizar una serie de atributos CSS y etiquetas HTML en su página web. Si no lo sabe ya acerca de CSS, que tendrá que leer sobre ella y crear una hoja de estilo CSS, un documento de texto simple con la extensión .css que se pone en su servidor y un enlace a la página web HTML, por lo el navegador sabe usarlo.

Instrucciones

1 Establecer en los bordes redondeados irán en su página web.

2 Crear las siguientes etiquetas en la página HTML en esta zona. Deben ser colocados en orden. <Div class = "t"> <div class = "b"> <div class = "l"> <div class = "r"> <div class = "bl"> <div class = "br"> <div class = "TL"> <div class = "tr"> Su información de texto o gráfica aquí ... </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> Esto construye las esquinas.

3 Abra la hoja de estilos CSS y poner estas etiquetas en él: .Bl {background: url (bl.gif) 0 100% no-repeat} {br background: url (br.gif) 100% 100% no-repeat}. tl {background: url (tl.gif) 0 0 no-repeat} .tr {background: url (tr.gif) 100% 0 no-repeat; padding: 10px}. El resultado es de cuatro esquinas con arcos circulares alrededor de su texto o imagen.

4 Borrar la frontera típica que va alrededor de las imágenes de las esquinas redondeadas mediante la creación de un pequeño punto blanco, llamado dot.gif, que es del mismo tamaño que la frontera.

5 Añadir nuevas reglas CSS a su hoja de estilo que llamar a este bloqueador de frontera (la imagen dot.gif) por lo que pasa alrededor de los bordes de la frontera, borrando las líneas cuadradas alrededor de las esquinas arqueadas. Las reglas son: .b {background: url (dot.gif) 0 100% repeat-x} .l {background: url (dot.gif) 0 0 repeat-y} .r {background: url (dot.gif) 100% 0 repeat-y}

6 Prueba de las fronteras y hacer correcciones a su código si es necesario.

Consejos y advertencias

• Nuevo código CSS se está convirtiendo en disponible para hacer esquinas redondeadas que son muy elegantes. Mantenga un ojo hacia fuera para estos códigos. Los puede encontrar siguiendo el enlace en Recursos.