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

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。