Día 82: CSS Border Images
La ruta del desarrollador web frontend autónomo🤹♂️
Con la propiedad CSS
border-image, puedes establecer una imagen para usarla como borde alrededor de un elemento.
La propiedad border-image
La propiedad CSS border-image le permite especificar una imagen para usar en lugar del borde normal alrededor de un elemento.
La propiedad tiene tres partes:
La imagen a usar como borde
Dónde cortar la imagen
Defina si las secciones intermedias deben repetirse o estirarse
Usaremos la siguiente imagen ("border.png"):
La propiedad border-image toma la imagen y la divide en nueve secciones, como un tablero de tres en raya. Luego coloca las esquinas en las esquinas y las secciones centrales se repiten o estiran según lo especifique.
Nota: Para que la propiedad
border-imagefuncione, el elemento también necesita el conjunto de propiedadesborder.
Aquí, las secciones centrales de la imagen se repiten para crear el borde:
Aquí está el código:
Ejemplo:
Aquí, las secciones centrales de la imagen se estiran para crear el borde:
Aquí está el código:
Ejemplo:
Tip: La propiedad
border-imagees en realidad una propiedad abreviada para las propiedadesborder-image-source,border-image-slice,border-image-width,border-image-outsetyborder-image-repeat.
border-image - diferentes valores de sector
Diferentes valores de corte cambian completamente el aspecto del borde:
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Aquí está el código:
Ejemplo:
Todas las propiedades border-image
| Propiedad | Descripción |
border-image | Una propiedad abreviada para establecer todas las propiedades border-image. |
border-image-source | Especifica la ruta a la imagen que se utilizará como borde. |
border-image-slice | Especifica cómo dividir la imagen del borde. |
border-image-width | Especifica los anchos de la imagen del borde. |
border-image-outset | Especifica la cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde. |
border-image-repeat | Especifica si la imagen del borde debe repetirse, redondearse o estirarse. |
Resumen
La propiedad CSS border-image permite especificar una imagen para usar en lugar del borde normal alrededor de un elemento. La propiedad tiene tres partes: la imagen a usar como borde, dónde cortar la imagen y si las secciones intermedias deben repetirse o estirarse. La propiedad border-image es una propiedad abreviada para las propiedades border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.
Traducido con 💚 desde W3Schools.com