HTML | Estilo DOM borderImageRepeat Propiedad

Posted on by Rudeus Greyrat

La propiedad borderImageRepeat en HTML DOM se usa para establecer o devolver la propiedad borderImageRepeat. Especifica si la imagen del borde debe repetirse para llenar el área, estirarse para llenar el área, establecer el valor inicial, heredar la propiedad de su padre, etc. Dependiendo de la necesidad, se configurará en consecuencia para que el borde de la imagen se vea más atractivo. . 

Sintaxis: 

  • Devuelve la propiedad borderImageRepeat. 
object.style.borderImageRepeat
  • Establece la propiedad borderImageRepeat. 
object.style.borderImageRepeat="stretch|repeat|round|
initial | inherit"

Valor devuelto: Devuelve la propiedad de repetición border-image.

Valores de propiedad: 

  • estirar: esta propiedad se usa para estirar la imagen para llenar el área. Es el valor predeterminado.

Sintaxis: 

object.style.borderImageRepeat="stretch";
  • Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <style>
        #GFG {
            border: 20px solid transparent;
            width: 200px;
            padding: 10px 20px;
             
            /* For Safari Browser */
            -webkit-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 round;
             
            /* For Opera Browser */
            -o-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 round;
             
            border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 round;
        }
    </style>
</head>
 
<body>
     
    <div id = "GFG">
        <h1>GeeksforGeeks</h1>
    </div><br>
     
    <button onclick = "myGeeks()">
        Click Here!
    </button>
     
     
<p>
        Click on button to change property
    </p>
 
     
    <script>
        function myGeeks() {
             
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 stretch";
             
            /* For Opera Browser */
            document.getElementById("GFG").style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 stretch";
             
            document.getElementById("GFG").style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 stretch";
        }
    </script>
 
</body>
</html>                   
  • Salida:  
    Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

  • repetir: esta propiedad se usa para repetir la imagen del borde para llenar el área.
    Sintaxis: 
object.style.borderImageRepeat =  "repeat";
  • Ejemplo: 

html

<!DOCTYPE html>
<html>
     
<head>
    <style>
        #GFG {
            border: 15px solid transparent;
            width: 200px;
            padding: 10px 20px;
             
            /* For Safari Browser */
            -webkit-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            /* For Opera Browser */
            -o-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
        }
    </style>
</head>
 
<body>
     
    <div id = "GFG">
        <h1>GeeksforGeeks</h1>
    </div><br>
     
    <button onclick="myGeeks()">
        Click Here!
    </button>
     
     
<p>
        Click on button to change property
    </p>
 
     
    <script>
        function myGeeks() {
             
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 repeat";
             
            /* For Opera Browser */
            document.getElementById("GFG").style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 repeat";
             
            document.getElementById("GFG").style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 repeat";
        }
    </script>
</body>
 
</html>                   
  • Salida:  
    Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

  • redondo: Se utiliza para repetir la imagen para rellenar el área. Si la imagen no llena el área en un número entero de mosaicos, la imagen se vuelve a escalar.

Sintaxis: 

object.style.borderImageRepeat = "round";
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
     
<head>
    <style>
        #GFG {
            border: 15px solid transparent;
            width: 200px;
            padding: 10px 20px;
             
            /* For Safari Browser */
            -webkit-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            /* For Opera Browser */
            -o-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
        }
    </style>
</head>
 
<body>
     
    <div id = "GFG">
        <h1>GeeksforGeeks</h1>
    </div><br>
     
    <button onclick="myGeeks()">
        Click Here!
    </button>
     
     
<p>
        Click on button to change property
    </p>
 
     
    <script>
        function myGeeks() {
             
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 round";
             
            /* For Opera Browser */
            document.getElementById("GFG").style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 round";
             
            document.getElementById("GFG").style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
            50 50 round";
        }
    </script>
</body>
 
</html>                   
  • Salida:  
    Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

  • espacio: la única diferencia con el valor de repetición es que si no llena el área con un número entero de mosaicos, se distribuye espacio adicional alrededor de los mosaicos. 
    Sintaxis: 
object.style.borderImageRepeat = "space";
  • Ejemplo: 

html

<!DOCTYPE html>
<html>
<head>
    <style>
        #GFG {
            border: 15px solid transparent;
            width: 200px;
            padding: 10px 20px;
             
            /* For Safari Browser */
            -webkit-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            /* For Opera Browser */
            -o-border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
             
            border-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/bir1.png")
            50 50 stretch;
        }
    </style>
</head>
 
<body>
     
    <div id="GFG">
        <h1>GeeksforGeeks</h1>
    </div><br>
     
    <button onclick="myGeeks()">
        Click Here!
    </button>
     
     
<p>
        Click on button to change property
    </p>
 
     
    <script>
        function myGeeks() {
             
            /* For Safari Browser */
            document.getElementById("GFG").style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
    50 50 space";
     
            /* For Opera Browser */
            document.getElementById("GFG").style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
        50 50 space";
            document.getElementById("GFG").style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bir1.png)
        50 50 space";
        }
    </script>
</body>
 
</html>                   
  • Salida:  
    Antes de hacer clic en el botón: 
     

  • Después de hacer clic en el botón: 
     

  • initial: se utiliza para establecer la propiedad borderImageRepeat en su valor predeterminado.
  • heredar: se utiliza para establecer la propiedad borderImageRepeat de su elemento principal.

Compatibilidad con navegadores: los navegadores compatibles con la propiedad borderImageRepeat de estilo DOM se enumeran a continuación: 

  • Google Chrome
  • Internet Explorer 11.0
  • Mozilla Firefox
  • Safari 6.0

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *