當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。