La propiedad border-image-repeat en CSS se usa para escalar y colocar mosaicos en las imágenes del borde. Se puede usar para hacer coincidir la parte central de la imagen del borde con el tamaño del borde. Puede tener uno o dos valores. Uno es para el eje horizontal y otro para el vertical. Solo se da un valor, entonces se aplica a todos los lados, pero se dan dos valores, se da un valor para los lados horizontales y otro para los lados verticales.
Sintaxis:
border-image-repeat: stretch|repeat|round|initial|inherit
Valores de propiedad:
estirar: es el valor predeterminado y se usa para estirar la imagen para llenar el área.
- Sintaxis:
border-image-repeat: stretch;
- Ejemplo:
<!DOCTYPE html><html><head><title>CSS border-image-repeat Property</title><!-- CSS property --><style>h2 {border: 20px solid transparent;padding: 20px;border-image-source:border-image-repeat: stretch;border-image-slice: 40;text-align:center;}</style></head><body><h2>border-image-repeat: stretch;</h2></body></html> - Producción:
repetir: esta propiedad se utiliza para repetir la imagen de fondo.
- Sintaxis:
border-image-repeat: repeat;
- Ejemplo:
<!DOCTYPE html><html><head><title>CSS border-image-repeat Property</title><!-- CSS property --><style>h2 {border: 20px solid transparent;padding: 20px;border-image-source:border-image-repeat: repeat;border-image-slice: 40;text-align:center;}</style></head><body><h2>border-image-repeat: repeat;</h2></body></html> - Producción:
redondo: Se utiliza para repetir la imagen para rellenar el área. Si la imagen no llena el área en el número total de mosaicos, la imagen se vuelve a escalar.
- Sintaxis:
border-image-repeat: round;
- Ejemplo:
<!DOCTYPE html><html><head><title>CSS border-image-repeat Property</title><!-- CSS property --><style>h2 {border: 20px solid transparent;padding: 20px;border-image-source:border-image-repeat: round;border-image-slice: 40;text-align:center;}</style></head><body><h2>border-image-repeat: round;</h2></body></html> - Producción:
initial: se utiliza para establecer la propiedad border-image-repeat en su valor predeterminado.
- Sintaxis:
border-image-repeat: initial;
- Ejemplo:
<!DOCTYPE html><html><head><title>CSS border-image-repeat Property</title><!-- CSS property --><style>h2 {border: 20px solid transparent;padding: 20px;border-image-source:border-image-repeat: initial;border-image-slice: 40;text-align:center;}</style></head><body><h2>border-image-repeat: initial;</h2></body></html> - Producción:
heredar: se usa para establecer la propiedad border-image-repeat de su padre.
Navegadores compatibles: los navegadores compatibles con la propiedad border-image-repeat se enumeran a continuación:
- Google Chrome 15.0
- Internet Explorer 11.0
- Firefox 15.0
- Ópera 15.0
- Safari 6.0
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA