CSS - border-top 属性

CSS border-top 属性是一个简写属性，用于在一个声明中设置边框顶部属性 border-top-width、border-top-style 和 border-top-color。必须声明 border-top-style才能使用此属性。如果未提供，则将使用其他属性的默认值。

语法

border-top: border-width border-style border-color | initial | inherit;

属性值

值	描述
border-top-width	指定元素顶部边框的宽度。可选。默认值为 medium。
border-top-style	指定元素顶部边框的样式。必需。默认值为 none。
border-top-color	指定元素顶部边框的颜色。可选。默认值为文本颜色。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 顶部边框属性示例

以下示例说明了使用不同值的 border-top 属性。

定义顶部边框属性的所有值

要在单个声明中定义 border-top-width、border-top-style 和 border-top-color 的值，我们使用 border-top 属性。需要提供三个值，第一个值用于宽度，第二个值用于样式，第三个值用于颜色。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
      .examples {
        text-align: center;
        padding: 20px;
      }

      .example1 {
        border-top: 7px solid green;
        background-color: lightblue;
      }

      .example2 {
        border: 2px solid black;
        border-top: 7px double red;
      }
    </style>
</head>

<body>
    <h2>
      CSS border-top property
    </h2>
    <h2 class="examples example1">
      This heading has a 'green' color, 'solid'
      style and '7px' width border top
    </h2>
    <p class="examples example2">
      This box has a 'red' color, 'dashed' style
      and '7px' width border top
    </p>
</body>

</html>

顶部边框属性的组成属性

border-top 属性是 border-top-width、border-top-style 和 border-top-color 属性的组合。以下示例显示了如何组合使用这些属性来显示 border-top 属性效果。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    .examples {
      text-align: center;
      padding: 20px;
    }

    .example1 {
      border-top-width: 8px;
      border-top-style: dashed;
      border-top-color: red;
      background-color: lightgreen;
    }

    .example2 {
      border: 2px solid black;
      border-top-width: 8px;
      border-top-style: dotted;
      border-top-color: purple;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-top property
  </h2>
  <h2 class="examples example1">
    This heading has a 'red' color, 'dashed'
    style and '8px' width border top
  </h2>
  <p class="examples example2">
    This box has a 'purple' color, 'dotted'
    style and '8px' width border top
  </p>
</body>

</html>

支持的浏览器

属性
border-top	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面