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

CSS - border-bottom-style用法及代码示例


CSS中的border-bottom-style属性用于设置元素底部边框的样式。

用法:

border-bottom-style:none|hidden|dotted|dashed|solid|double|groove|
ridge|inset|outset|initial|inherit;

属性值：


none：这是默认值，它使底部边框的宽度为零。因此，它是不可见的。

  • 用法: 
    border-bottom-style:none;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:none;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:none; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

隐藏：用于使底部边框不可见。除解决表元素的边界冲突的情况外，它与none值相似。

  • 用法: 
    border-bottom-style:hidden;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:hidden;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:hidden; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                   
    
  • 输出：

点分：使底部边框带有一系列点。

  • 用法: 
    border-bottom-style:dotted;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:dotted;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:dotted; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

虚线：使底部边框带有一系列短线段。

  • 用法: 
    border-bottom-style:dashed;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:dashed;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:dashed; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

实心：用于用单个实线线段制作底边框。

  • 用法: 
    border-bottom-style:solid;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:solid;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:solid; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

double：使底部边框加倍实线。在这种情况下，边框宽度等于two-line段的宽度与它们之间的距离之和。

  • 用法: 
    border-bottom-style:double;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-bottom-style */  
                border-bottom-style:double;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:double; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

凹槽：使底部边框带有带凹槽的线段，使人感觉它正在向内移动。

  • 用法: 
    border-bottom-style:groove;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                border:10px;  
                border-style:solid;  
                  
                /* CSS Property for border-bottom-style */  
                border-bottom-style:groove;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:groove; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                                 
  • 输出：

插图：它使底部边框带有嵌入的线段，从而使它感觉很牢固地固定在屏幕上。

  • 用法: 
    border-bottom-style:inset;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                border:10px;  
                border-style:solid;  
                  
                /* CSS Property for border-bottom-style */  
                border-bottom-style:inset;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:inset; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                                 
  • 输出：

起点：与起点相反。它使底线带有线段，看起来好像出来了。

  • 用法: 
    border-bottom-style:outset;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                border:10px;  
                border-style:solid;  
                  
                /* CSS Property for border-bottom-style */  
                border-bottom-style:outset;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:outset; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                                 
  • 输出：

initial：将border-bottom-style属性设置为其默认值。

  • 用法: 
    border-bottom-style:initial;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-botton-style property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property for border-botton-style */  
                border-bottom-style:initial;  
            }  
        </style>  
      
    </head>  
      
    <body>  
        <!-- border-bottom-style:initial; -->
        <h1>GeeksForGeeks</h1>  
    </body>  
</html>                     
  • 输出：

继承：从其父元素继承的border-bottom-style属性。

  • 用法: 
    border-bottom-style:inherit;
  • 例： 
    <!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS border-bottom-style Property  
        </title>  
      
        <!-- Internal CSS Style Sheet -->
        <style>  
            div {  
                border-bottom-style:double;  
            }  
            h1 {  
                color:green;  
                text-align:center;  
                border:5px solid black;  
          
                /* CSS Property | border-bottom-style */  
                border-bottom-style:inherit;  
            }  
        </style>  
    </head>  
      
    <body>  
        <div> 
              
            <!-- border-bottom-style:inherit; -->
            <h1>GeeksForGeeks</h1>  
        </div> 
    </body>  
</html>                     
  • 输出：

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

  • 谷歌浏览器1.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 9.2
  • Safari 1.0


相关用法


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