CSS border-image-repeat用法及代码示例

CSS中的border-image-repeat属性用于缩放和平铺边框图像。它可以用于将border-image的中间部分与边框的大小匹配。它可以具有一个或两个值。一种是水平轴，另一种是垂直轴。仅给出一个值，然后将其应用于所有侧面，但是给出两个值，则给定一个值以表示水平值，另一个值表示垂直值。

用法:

border-image-repeat:stretch|repeat|round|initial|inherit

属性值：

拉伸：这是默认值，用于拉伸图像以填充区域。

用法:
```
border-image-repeat:stretch;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS border-image-repeat Property 
        </title>  
          
        <!-- CSS property -->
        <style>  
            h2 { 
                border:20px solid transparent; 
                padding:20px; 
                border-image-source:  
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
                border-image-repeat:stretch; 
                border-image-slice:40; 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>border-image-repeat:stretch;</h2> 
    </body> 
</html>

输出：

重复：此属性用于重复背景图像。

用法:
```
border-image-repeat:repeat;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS border-image-repeat Property 
        </title>  
          
        <!-- CSS property -->
        <style>  
            h2 { 
                border:20px solid transparent; 
                padding:20px; 
                border-image-source:  
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
                border-image-repeat:repeat; 
                border-image-slice:40; 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>border-image-repeat:repeat;</h2> 
    </body> 
</html>

输出：

圆形：用于重复图像以填充区域。如果图片未填满整个图块的区域，则会重新缩放图片。

用法:
```
border-image-repeat:round;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS border-image-repeat Property 
        </title>  
          
        <!-- CSS property -->
        <style>  
            h2 { 
                border:20px solid transparent; 
                padding:20px; 
                border-image-source:  
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
                border-image-repeat:round; 
                border-image-slice:40; 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>border-image-repeat:round;</h2> 
    </body> 
</html>

输出：

initial：用于将border-image-repeat属性设置为其默认值。

用法:
```
border-image-repeat:initial;
```

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS border-image-repeat Property 
        </title>  
          
        <!-- CSS property -->
        <style>  
            h2 { 
                border:20px solid transparent; 
                padding:20px; 
                border-image-source:  
url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
                border-image-repeat:initial; 
                border-image-slice:40; 
                text-align:center; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>border-image-repeat:initial;</h2> 
    </body> 
</html>

输出：

继承：用于从其父级设置border-image-repeat属性。

支持的浏览器：下面列出了border-image-repeat属性支持的浏览器：

谷歌浏览器15.0
Internet Explorer 11.0
Firefox 15.0
Opera 15.0
Safari 6.0

相关用法

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