CSS 边框线样式

在本文中，我们将介绍 CSS 中的边框线样式，它可以应用于元素的四个边框之一或多个。可以使用 CSS 属性 border-style 或者边框样式函数设置边框线样式。

阅读更多：CSS 教程

border-style 属性

border-style 属性规定元素边框的样式。它可以设置以下值：

solid：实线
dashed：虚线
dotted：点线
double：双线
groove：凹凸线
ridge：脊线
inset：向内凸出的边框样式
outset：向外凸出的边框样式
none：无边框
hidden：隐藏边框

可以使用以下代码为元素添加边框线样式：

border-style: dashed;

边框样式函数

边框样式函数是一种方便的方式来设置元素的多个边框的边框线样式。它可以接受 1 到 4 个参数。以下是一些常见的边框属性值设置示例：

/* 通用边框属性 */
border: 1px solid black;

/* 上下边框属性 */
border-top: 1px solid black;
border-bottom: 1px solid black;

/* 左侧边框属性 */
border-left: 1px solid black;

/* 左侧和右侧边框属性 */
border-left: 1px solid black;
border-right: 1px solid black;

/* 所有边框属性 */
border: 1px solid black;

边框样式函数可以避免使用多个 border- 属性的冗余，也方便了代码的管理。

应用示例

以下是一些应用 CSS 边框线样式的示例：

<div class="solid">实线边框</div>

<div class="dashed">虚线边框</div>

<div class="dotted">点线边框</div>

<div class="double">双线边框</div>

<div class="groove">凹凸边框</div>

<div class="ridge">脊边框线</div>

<div class="inset">向内凸出的边框线</div>

<div class="outset">向外凸出的边框线</div>

.solid {
  border-style: solid;
}

.dashed {
  border-style: dashed;
}

.dotted {
  border-style: dotted;
}

.double {
  border-style: double;
}

.groove {
  border-style: groove;
}

.ridge {
  border-style: ridge;
}

.inset {
  border-style: inset;
}

.outset {
  border-style: outset;
}