CSS | border-top 属性

简介

CSS 的 border-top 属性用于设置 HTML 元素顶部边框的样式、宽度和颜色。

语法如下：

border-top: border-top-width border-top-style border-top-color;

其中：

• border-top-width：指定边框宽度，可以为像素、百分比或预定义的值（如：thin、medium、thick）。
• border-top-style：指定边框样式，可以为：实线（solid）、虚线（dashed）、点线（dotted）、双实线（double）等。
• border-top-color：指定边框颜色。

下面是一些示例：

border-top: 1px solid #000;
border-top: 2px dotted red;
border-top: thick double blue;

值

border-top-width

border-top-width 用于设置边框宽度，可以使用如下值：

• thin
• medium
• thick
• 像素值（如 1px、2px）
• 百分比值（相对于父元素的宽度）

border-top-style

border-top-style 用于设置边框样式，可以使用如下值：

• none：无线条。
• hidden：线条被隐藏。
• dotted：单个圆点组成的线条。
• dashed：一系列破折号组成的线条。
• solid：实线。
• double：两条实线。
• groove：三维凹槽效果。
• ridge：三维凸槽效果。
• inset：内阴影效果。
• outset：外立体效果。
• initial：继承父元素的属性值。
• inherit：继承自定义的属性值。

border-top-color

border-top-color 用于设置边框颜色，可以使用如下值：

• color-name
• HEX
• RGB
• transparent
• initial
• inherit

实例

以下是一个应用 border-top 属性的 HTML 元素实例及展示效果：

<style>
  #myDiv {
    width: 300px;
    height: 100px;
    border-top: 5px solid blue;
  }
</style>

<div id="myDiv"></div>

总结

border-top 属性用于设置 HTML 元素顶部边框的样式、宽度和颜色。同时，这个属性还可以被分解为 border-top-width、border-top-style 和 border-top-color 三个子属性。通过设置这些属性，我们可以优雅地为 HTML 元素添加边框样式，让其更加美观。