当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

HTML Style borderImageRepeat用法及代码示例


HTML DOM中的borderImageRepeat属性用于设置或返回borderImageRepeat属性。它指定border-image是否应重复填充该区域，拉伸以填充该区域，设置为初始值，从其父项继承属性等。根据需要，将进行相应的设置以使图像边框看起来更具吸引力。

用法:

  • 它返回borderImageRepeat属性。
    object.style.borderImageRepeat
  • 它设置borderImageRepeat属性。
    object.style.borderImageRepeat="stretch|repeat|round|
initial|inherit"

返回值：它返回边框图像重复属性。


属性值：

  • stretch:此属性用于拉伸图像以填充区域。它是默认值。

    用法:

    object.style.borderImageRepeat="stretch";

    例：

    <!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>                    

    输出：
    在单击按钮之前：

    单击按钮后：

  • repeat:此属性用于重复边框图像以填充区域。

    用法:

    object.style.borderImageRepeat =  "repeat";

    例：

    <!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>                    

    输出：
    在单击按钮之前：

    单击按钮后：

  • round:它用于重复图像以填充区域。如果图片未全部填满该区域，则会重新缩放图片。

    用法:

    object.style.borderImageRepeat = "round";

    例：

    <!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>                    

    输出：
    在单击按钮之前：

    单击按钮后：

  • space:与重复值的唯一区别是，如果重复值未用全部图块填充该区域，则多余空间将分布在图块周围。

    用法:

    object.style.borderImageRepeat = "space";

    例：

    <!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>                    

    输出：
    在点击按钮之前：

    单击按钮后：

  • initial:它用于将borderImageRepeat属性设置为其默认值。
  • inherit:它用于从其父元素设置borderImageRepeat属性。

浏览器支持：下面列出了DOM样式borderImageRepeat属性支持的浏览器：

  • 谷歌浏览器
  • Internet Explorer 11.0
  • Mozila Firefox
  • Safari 6.0


相关用法


注：本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style borderImageRepeat Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。