border-style

介绍

用于设置四个边框的样式,该属性可按顺序设置上边框样式、右边框样式、下边框样式、左边框样式。

取值

  • none 无边框。无边框属性时,边框宽度(无论宽度设置多少)将变为 0。

  • hidden"none"相同。不过应用于表时除外,对于表,hidden用于解决边框冲突。

  • dotted 点状边框。在大多数浏览器中呈现为实线。

  • dashed 虚线。在大多数浏览器中呈现为实线。

  • solid 实线。

  • double 双线。两条线的宽度再加上这两条线之间的空间等于border-widthTTSS规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗,所有这些都由用户决定。

  • groove 3D 凹槽边框。其效果取决于border-color的值。

  • ridge 3D 垄状边框。其效果取决于border-color的值。

  • inset 3D inset 边框。其效果取决于border-color的值。

  • outset 3D outset 边框。其效果取决于border-color的值。

标准化语法

<line-style>{1,4}
where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
1
2
3

样例:

border-style: solid;
border-style: dotted groove;
border-style: ridge outset inset;
border-style: double solid none dashed;
border-style: hidden solid dotted dashed;
1
2
3
4
5

与 Web 的区别

不支持 inherit、initial、revert、unset 等

值为 'none' 或 'hidden' 时 对应边框的排版宽度未设为 0

默认值为 'solid', 区别于 web 的默认值 'none'

Last Updated: 2022/7/15 下午7:22:06