Cómo crear un borde alrededor de una imagen en css3

Video: Cómo crear tu propia página web usando HTML : Cómo agregar un borde de imagen en una página Web

Uno de los cambios más comunes que puede realizar en una imagen en CSS3 es añadir una frontera. Esto pone en marcha la imagen del otro contenido de la página. Por supuesto, CSS3 ofrece una amplia gama de tipos de borde. El truco es conseguir que la frontera para mostrar alrededor de la imagen de tal manera que se pueden realizar otras tareas con la frontera más tarde.

Ahí es donde el

usado como un recipiente para el la etiqueta se muestra en el ejemplo anterior) - y se puede interactuar con ese contenedor de diversas maneras. El siguiente procedimiento le ayuda a añadir un borde alrededor de la imagen.

1. Crear un nuevo archivo CSS con su editor de texto.

   Su editor no sea compatible con los archivos CSS. Cualquier archivo de texto va a hacer.

2. Escriba la siguiente información de estilo CSS.

   #ImageContainer {-estilo de borde: ranura-frontera-ancho: espesor-border-color: gris-padding: 5px; float: left;}

   La mayor parte de esta información de estilo se trata de la frontera. Adición de relleno para la frontera hace que sobresalga más como un marco. El valor flotante mantiene el

   alrededor de la imagen, en lugar de tener que seguir el lado derecho del navegador, cuando un usuario cambia el tamaño de la ventana del navegador.

   Si desea que la imagen en el lado derecho de la página, en lugar de la izquierda, flotador sustituto: la derecha ;. El contenedor entero, imagen incluida, residirá en el lado derecho de la página, en lugar de la izquierda. A medida que el usuario cambia la ventana del navegador, la imagen seguirá siendo el mismo tamaño, pero se moverá con el lado derecho de la ventana del navegador.

3. Guarde el archivo como SimpleGraphics.CSS.

4. Agregue el código siguiente a la área del archivo HTML.

   Este código crea el vínculo entre el archivo HTML y el archivo CSS.

5. Guarde el archivo HTML y volver a cargar la página.

   Video: CSS3 // Como hacer Bordes Redondeados

   Usted ve la frontera.

   

   Video: Trucos CSS (10) - Bordes de colores