CSS border-style 属性

CSS border-style属性技术文档

介绍

CSS边框属性包括border-style，它的主要作用是设置元素的边框线条样式。border-style属性指定元素的四条边框（上、右、下、左）如何呈现。一个元素最多可以指定4种边框线条样式。 CSS border-style属性有以下特点：

  • 它是一个有简写的 CSS属性，其他 3 个是border-width，border-color和border-bottom；
  • 可以独立使用也可以组合使用；
  • 属性值由单词、十六进制和RGB值组成，可以定义为单独的属性或四个属性集合；

语法

CSS border-style属性定义如下所示：

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

该属性有多个可能的值：

  • none：没有边框线条。
  • hidden：与none相同，但在打印时可见。
  • dotted：一个由点组成的边框线。
  • dashed：一个由虚线组成的边框线。
  • solid：一个实线。
  • double：一个由两条实线组成的边框。间距的宽度不可设置。
  • groove：一个 3D 凹槽的边框。看起来像是一个凹进去的线条。虚线变成了实线。
  • ridge：一个 3D 凸起的边框。看起来像是一个凸出来的线条。虚线变成了实线。
  • inset：一个 3D 凹陷的边框。线条显示在元素框的内部。
  • outset：一个 3D 凸出的边框。线条显示在元素框的外部。
  • initial：使用默认值。
  • inherit：从父元素继承。

除了设置该属性的值之外，还可以为每条边设置不同的样式，如下所示：

border-top-style
border-right-style
border-bottom-style
border-left-style

示例

基础应用

div {
    border-style: solid;
}

以上代码将会让div元素的四条边框都变成实线框。

设置特定边框的线条样式

div {
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: groove;
}

以上代码将会让div元素的上边框呈现点状样式；右边框呈现虚线样式；下边框呈现实线样式；左边框呈现3D凹槽样式。

设定所有元素的默认值

* {
    border-style: dashed;
}

所有元素的边框将会呈现虚线框。

总结

CSS border-style可以设置元素的边框线条样式，有灵活的应用。在使用时需要注意其取值之间的差异。建议首先根据设计需要设置好基础样式，并考虑选用特定边框样式和不同颜色线条的完整应用。

CSS border-spacing 属性 CSS border-top 属性