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

CSS border-top-style用法及代碼示例


border-top 樣式屬性用於指定上邊框的樣式。

用法:

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

默認值：默認值為無。

屬性值

  1. None:這是默認值，它使上邊框的寬度為零。因此，它是不可見的。
    用法：

    border-top-style:none;

    示例1：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:none;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  2. Dotted:它用於用一係列點製作頂部邊框。
    用法：
    border-top-style:dotted;

    示例-2：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:dotted;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  3. Dashed:它用一係列短線段製作頂部邊框。
    用法：
    border-top-style:dashed;

    示例3：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:dashed;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  4. Solid:它用於使用單個實線段製作頂部邊框。

    用法:

    border-top-style:solid;

    示例4：



    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:solid;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  5. Groove:它使頂部邊框帶有凹槽線段，這讓我們感覺它正在進入內部。

    用法:

    border-top-style:groove;

    示例5：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:groove;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  6. Inset:它使頂部邊框帶有嵌入的線段，使我們感覺它深深地固定在屏幕上。

    用法:

    border-top-style:inset;

    示例6：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:inset;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  7. Outset:它與插圖相反。它使頂部邊框帶有一條線段，看起來它正在出來。

    用法:

    border-top-style:outset;

    示例7：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:outset;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  8. Ridge:它與凹槽相反。它使頂部邊框帶有一個脊線段，這讓我們感覺它是出來的。

    用法:

    border-top-style:ridge;

    示例 8：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:ridge;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  9. Double:它使頂部邊框帶有雙實線。在這種情況下，邊框寬度等於 two-line 段的寬度和它們之間的空間的總和。

    用法:



    border-top-style:double;

    示例 9：

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:double;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  10. Hidden:它用於使頂部邊框不可見，就像沒有一樣，除非在表格元素的邊框衝突解決的情況下。

    用法:

    border-top-style:hidden;

    示例 10

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3.a {
            border-top-style:hidden;
        }
    </style>
</head>
  
<body>
    <h3 class="a">GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  11. Initial:它用於設置元素的默認值。

    用法:

    border-top-style:initial;

    示例：11

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style:initial;
        }
          
    </style>
</head>
  
<body>
    <h3>GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

  12. Inherit:它使 top-border-style 屬性從其父元素繼承。

    用法:

    border-top-style:inherit;

    示例：12

    
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | border-top-style Property
    </title>
    <style>
        h3 {
            border-top-style:inherit;
        }
          
        body {
            border-top-style:dotted;
        }
    </style>
</head>
  
<body>
    <h3>GeeksforGeeks </h3>
</body>
  
</html>

    輸出：

    注意：使用 border-top 屬性時，此屬性是必需的。

    支持的瀏覽器： border-top-style 屬性支持的瀏覽器如下：

    • 穀歌瀏覽器
    • Edge
    • 火狐瀏覽器
    • Opera
    • Safari



相關用法


注：本文由純淨天空篩選整理自sheyakhare1999大神的英文原創作品 CSS | border-top-style Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。