Cómo crear bordes de la imagen repetitivas en css3

Uno de los usos más comunes de imágenes repetitivas en CSS3 es crear fronteras hechas de imágenes. Por desgracia, esta técnica no funciona bien con Internet Explorer 9. Se hace el trabajo, sin embargo, con todas las nuevas versiones de Chrome, Firefox e Internet Explorer 10. El siguiente procedimiento toma el ejemplo SimpleGraphics creado anteriormente y añade un borde pata-impresión lo.

1. Abre el SimpleGraphics.HTML archivo.

   Es necesario modificar la página de modo que hay una nueva

   para mantener el margen, que en realidad no es parte de la imagen. Si intenta adjuntar los gráficos de margen al contenedor de imagen existente, los gráficos serán aparezcan centradas en el margen del contenedor de la imagen, en lugar de como imágenes completas.

2. Añadir un nuevo

   a la página como se muestra.

   Una imagen de un gato lindo!

3. Modificar el etiqueta por lo que se ve así:

4. Guarde el archivo HTML como BorderGraphics.HTML.

5. Abra el archivo SimpleGraphics.CSS.

   Es necesario cambiar los estilos de manera que van a trabajar con los nuevos contenedores que se encuentran en el archivo HTML. Pensar en ser la frontera una caja que encierra un cuadro de la celebración de la imagen y el título. Lo que se obtiene en lugar de un único cuadro de imagen es una caja dentro de otra caja.

6. Añadir un nuevo estilo #BorderContainer como el que se muestra aquí.

   #BorderContainer {border-style: sólido-border-width: 20px; border-image: url (PawPrint.jpg) 25 22 23 de llenado de ida y padding: 24px; float: left; position: absolute-altura: 465 píxeles; anchura: 440px ; izquierda: 50% -margin-left: -244px;}

   La mayoría de estas propiedades son las mismas que las usadas originalmente para el estilo #ImageContainer. el BorderContainer

   es ahora el recipiente exterior, por lo que la posición de que en lugar de la ImageContainer
   . Hay algunos cambios en las mediciones para acomodar el tamaño de la frontera.

   Video: Bordes redondeados con CSS (border radious)

   El mayor cambio es la adición de la propiedad border-image. Usted indica el URL de la imagen que desea utilizar, junto con el desplazamiento hacia el interior de la frontera imagen, el ancho de la imagen, y el principio de la imagen.

   El valor de relleno indica al navegador para llenar el

   copias de la imagen y el valor ronda le dice al navegador para cambiar el tamaño de la imagen para que un número par de imágenes a llenar el
   .

   Averiguar los números de la imagen de una frontera puede ser difícil y requiere mucho tiempo. Afortunadamente, se puede utilizar el frontera-imagen-generador para hacer el trabajo para usted. Sólo es necesario que la ubicación de la imagen de borde que desea utilizar y luego usar los controles deslizantes para averiguar los valores óptimos para la colocación de esa imagen en torno a una

   . Puede copiar los resultados directamente desde la página de su aplicación.

7. Modificar el estilo #ImageContainer de manera que refleje su nuevo papel como un recipiente interior.

   #ImageContainer {margin: 20px; altura: 420px; anchura: 400px; background-color: Blanco-}

8. Guarde el archivo CSS como BorderGraphics.CSS.

9. Cargar la página BorderGraphics.

   Que vea la página. Observe que los gráficos de frontera rodean tanto la imagen como su título.