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