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


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>                    
  • 输出:
    stretch

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

  • 用法:
    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>                    
  • 输出:
    stretch

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

  • 用法:
    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>                    
  • 输出:
    stretch

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>                    
  • 输出:
    stretch

继承:用于从其父级设置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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。