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

CSS border-width用法及代码示例


CSS中的border-width属性用于设置元素所有四个边的边框宽度。 border-width属性是四个属性的组合

用法:

border-width:length|thin|medium|thick|initial|inherit

属性值：


  • length:用于设置边框的宽度。它不取负值。
  • thin:用于在元素顶部设置细边框。
  • medium:用于设置中等大小的顶部边框。它是默认值。
  • thick:用于设置粗大的顶部边框。
  • initial:用于将border-top-width设置为其默认值。
  • inherit:此属性是从其父级继承的。

范例1：本示例将border-width的所有面都设置为单个值。
border-width：val;

  • border-top-width：val;
  • border-right-width：val;
  • border-bottom-width：val;
  • border-left-width：val;
<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title> 
          
        <style> 
            div { 
                margin-bottom:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <p>border-width property:[value]</p> 
      
        <!-- This div has a uniform border 
        of 10px around it. -->
        <div style="border-width:10px"> 
            This div has a border around it of 10px. 
        </div> 
      
        <!-- This div has a uniform thin 
        border around it. -->
        <div style="border-width:thin"> 
            This div has a thin border. 
        </div> 
      
        <!-- This div has a uniform medium 
        border around it. -->
        <div style="border-width:medium"> 
            This div has a medium border. 
        </div> 
      
        <!-- This div has a uniform thick 
        border around it. -->
        <div style="border-width:thick"> 
            This div has a thick border. 
        </div> 
    </body> 
</html>                    

输出：
border-width with one value

范例2：本示例包含两个值border-width。
border-width：val1 val2;

  • border-top-width：val1;
  • border-right-width：val2;
  • border-bottom-width：val1;
  • border-left-width：val2;
<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title> 
          
        <style> 
            div { 
                margin-bottom:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style = "color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <p>border-width property:[value] [value]</p> 
      
        <!-- This div has a 5px border on the top and 
        bottom, and 30px on the left and right. -->
        <div style = "border-width:5px 30px"> 
            This div has a border of 5px on the top and 
            bottom, and 30px on the left and right. 
        </div> 
      
        <!-- This div has a thin border on the top and 
        bottom, and thick on the left and right. -->
        <div style = "border-width:thin thick"> 
            This div has a thin border on the top and bottom, 
            and thick border on the left and right. 
        </div> 
    </body> 
</html>                    

输出：
border-width with two values

范例3：本示例将border-width设置为三个值。
border-width：val1 val2 val3;

  • border-top-width：val1;
  • border-right-width：val2;
  • border-bottom-width：val3;
  • border-left-width：val2;
<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title> 
          
        <style> 
            div { 
                margin-bottom:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
          
        <p> 
            border-width property:[value] [value] [value] 
        </p> 
      
        <!-- This div has a 5px border on the top, 30px  
        on the left and right, and 15px on the bottom. -->
        <div style = "border-width:5px 30px 15px"> 
            This div has a 5px border on the top, 30px on 
            the left and right, and 15px on the bottom. 
        </div> 
      
        <!-- This div has a thin border on the top, a thick  
        border on the left and right,and a medium border 
        on the bottom. -->
        <div style = "border-width:thin thick medium"> 
            This div has a thin border on the top, a thick 
            border on the left and right, and a medium 
            border on the bottom. 
        </div> 
    </body> 
</html>                    

输出：
border-width with three values

范例4：本示例包含border-width属性的四个值。
border-width：val1 val2 val3 val4;

  • border-top-width：val1;
  • border-right-width：val2;
  • border-bottom-width：val3;
  • border-left-width：val4;
<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title>  
          
        <style> 
            div { 
                margin-bottom:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <p> 
            border-width property:  
            [value] [value] [value] [value] 
        </p> 
      
        <!-- This div has a border of 5px on the top, 
        30px on the right, 15px on the bottom, and  
        2px on the left. -->
        <div style = "border-width:5px 30px 15px 2px"> 
            This div has a border of 5px on the top,  
            30px on the right, 15px on the bottom,  
            and 2px on the left. 
        </div> 
      
        <!-- This div has a thin border on the top, 
        thick border on right, medium border on the 
        bottom, and thin border on the left. -->
        <div style = "border-width:thin thick medium thin"> 
            This div has a thin border on the top, thick 
            border on right, medium border on the bottom, 
            and thin border on the left. 
        </div> 
    </body> 
</html>                    

输出：
border-width with four values

范例5：本示例描述border-width属性的初始值。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title> 
          
        <style> 
            div { 
                margin-bottom:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <p>border-width property:initial</p> 
      
        <!-- This div has the border widht set  
        to initial. -->
        <div style="border-width:initial"> 
            This div has the default border width, 
            which is the medium border. 
        </div> 
    </body> 
</html>                    

输出：
border-width initial

范例6：本示例描述了继承属性。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            border-width property 
        </title> 
          
        <style> 
            div { 
                margin:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <p>border-width property:inherit</p> 
      
        <!-- This div is the parent with the border 
        width set to thick. -->
        <div id="parent" style="border-width:thin"> 
            This is the parent div. 
      
            <!-- This div inherits the border width 
            from the parent div. -->
            <div style="border-width:inherit"> 
                This div inherits the border width 
                from the parent. 
            </div> 
        </div> 
    </body> 
</html>                    

输出：
border-width inherit

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

  • 谷歌浏览器1.0
  • Firefox 1.0
  • Internet Explorer 4.0
  • 苹果Safari 1.0
  • Opera 3.5


相关用法


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