Puede repetir imágenes de borde usando la propiedad border-image-repeat en CSS. Generalmente se usa para escalar y colocar mosaicos en la imagen del borde. Se utiliza para hacer coincidir la parte central de la imagen del borde con el tamaño del borde.
Sintaxis:
border-image-repeat: stretch|repeat|round|initial|inherit
Nota: La propiedad border-image-slice se usa para dividir o rebanar una imagen especificada por la propiedad border-image-source .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS property -->
<style>
h1 {
border: 40px solid transparent;
padding: 40px;
border-image-source:url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: stretch;
border-image-slice: 40;
text-align:center;
}
h2{
border: 40px solid transparent;
padding: 40px;
border-image-source:url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-slice: 50;
text-align:center;
}
</style>
</head>
<body>
<h1>border-image-repeat:stretch</h1>
<h2>border-image-repeat:round</h2>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS property -->
<style>
h1{
color: green;
text-align: center;
}
h2 {
border: 40px solid transparent;
padding: 40px;
border-image-source:url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: repeat;
border-image-slice: 40;
text-align:center;
}
h3{
border: 40px solid transparent;
padding: 40px;
border-image-source:url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: space;
border-image-slice: 50;
text-align:center;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>border-image-repeat: repeat</h2>
<h3>border-image-repeat: space</h3>
</body>
</html>
Producción:
Nota: La propiedad border-image-repeat tiene una sintaxis de un valor que describe el comportamiento de todos los lados y una sintaxis de dos valores que establece un valor diferente para el comportamiento horizontal y vertical.
Ejemplo 3:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS property -->
<style>
h1{
color: green;
text-align: center;
}
h2 {
border: 40px solid transparent;
padding: 40px;
border-image-source:url(
https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png);
border-image-repeat: repeat round;
border-image-slice: 40;
text-align:center;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>border-image-repeat: repeat round</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA