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

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


CSS border-image-width属性用于设置边框图像的宽度。可以通过提供多个值来设置。

  • 如果仅提供一个值，则将其应用于所有四个面。
  • 如果指定了两个值，则第一个值将应用于“顶部和底部”，第二个值将应用于“左侧和右侧”。
  • 如果指定了三个值，则第一个值分配给顶部，第二个值分配给“左右”，第三个值分配给底部。
  • 如果给出了四个值，则将它们应用于上，右，下和左(顺时针)顺序。

用法:

border-image-width:number | % | auto | initial | inherit;

属性值：


  • 长度：用于以相对方式指定值。
  • 百分比：用于以百分比形式指定宽度。
  • 数：用于将宽度设置为border-width对应计算值的倍数
  • 初始：将此属性设置为其默认值
  • 继承：用于从父元素继承值

范例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS|border-image-width Property</title> 
    <style> 
        h1, 
        h2 { 
            color:green; 
        } 
          
        #gfg { 
            border:10px solid transparent; 
            padding:15px; 
            border-image-source:  
        url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
            border-image-repeat:round; 
            border-image-slice:30; 
            border-image-width:20px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 id="gfg">GeeksForGeeks</h1> 
    <h2 id="gfg">CSS|border-image-width Property</h2> 
  
</body> 
  
</html>

输出：

范例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS|border-image-width Property</title> 
    <style> 
        h1, 
        h2 { 
            color:green; 
        } 
          
        #geek1 { 
            border:10px solid transparent; 
            padding:15px; 
            border-image-source:  
        url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
            border-image-slice:30; 
            border-image-width:10px 20px; 
        } 
          
        #geek2 { 
            border:10px solid transparent; 
            padding:10px; 
            border-image-source:  
         url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
            border-image-slice:30; 
            border-image-width:1.2rem; 
        } 
          
        #geek3 { 
            border:10px solid transparent; 
            padding:15px; 
            border-image-source:  
         url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); 
            border-image-slice:30; 
            border-image-width:10% 20% 10% 20%; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 id="gfg">GeeksForGeeks</h1> 
    <h2 id="gfg">CSS|border-image-width Property</h2> 
    <p id="geek1"> Geek one </p> 
    <p id="geek2"> Geek two </p> 
    <p id="geek3" style="text-align:center"> Geek three </p> 
  
</body> 
  
</html> 
                         

输出：

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

  • 谷歌浏览器15.0
  • 边11.0
  • Firefox 13.0
  • Opera 15.0
  • 苹果Safari 6.0


相关用法


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