CSS border-style 属性

在 CSS 中，border-style 属性用来定义元素边框的样式。这个属性可以设置一个或多个边框的样式，可以是实线、虚线、点线等。

值

border-style 属性可以接受以下几种值：

• none：无边框
• hidden：隐藏边框，但仍占据空间
• dotted：点线边框
• dashed：虚线边框
• solid：实线边框
• double：双线边框
• groove：3D 凹槽边框
• ridge：3D 凸起边框
• inset：3D 内阴影边框
• outset：3D 外阴影边框
• initial：设置为默认值
• inherit：从父元素继承值

语法

.element {
  border-style: value;
}

示例

// www.javascriptcn.com code example
.border-example {
  border-style: solid;
}

.dotted-border {
  border-style: dotted;
}

.double-border {
  border-style: double;
}

在上面的示例中，.border-example 类的元素将拥有实线边框，.dotted-border 类的元素将拥有点线边框，.double-border 类的元素将拥有双线边框。

这就是 CSS 属性 border-style 的用法和示例。通过合理地运用这个属性，可以为网页元素添加不同样式的边框，增强页面的视觉效果。