CSS 上下边框

CSS 提供了一种灵活的方式来设置元素的上下边框样式。通过使用不同的属性和值，我们可以自定义边框的外观，如颜色、宽度、样式等。

本文将介绍常用的 CSS 属性和值来设置上下边框，并提供示例代码和效果展示。

border-top 属性

border-top 属性用于设置元素的上边框样式。

语法

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

• [border-width]：指定上边框的宽度，可以是长度值（如 1px、2rem）或预定义值（如 thin、medium、thick）。
• [border-style]：指定上边框的样式，可以是实线(solid)、虚线(dashed)、点线(dotted)等。
• [border-color]：指定上边框的颜色，可以是具体颜色值（如 red、#00ff00）或预定义颜色名（如 transparent、currentColor）。

示例

.example {
  border-top: 2px solid blue;
}

效果：元素的上边框为蓝色，宽度为2像素，样式为实线。

border-bottom 属性

border-bottom 属性用于设置元素的下边框样式。

语法

border-bottom: [border-width] [border-style] [border-color];

与 border-top 属性语法相同，只是应用于下边框。

示例

.example {
  border-bottom: 1px dotted #ccc;
}

效果：元素的下边框为虚线，宽度为1像素，颜色为淡灰色。

组合使用

你也可以同时设置上、下边框的样式。

示例

.example {
  border-top: 2px dashed red;
  border-bottom: 2px dashed red;
}

效果：元素同时具有相同的上、下边框样式，为红色虚线，宽度为2像素。

总结

通过使用 border-top 和 border-bottom 属性，我们可以灵活地定义元素的上、下边框样式。你可以根据自己的需求调整边框的宽度、样式和颜色。

注意：使用这些边框样式属性时，需要保证元素具有足够的高度，否则边框可能无法完全显示出来。

参考文档：MDN CSS border-top，MDN CSS border-bottom