CSS | border-block-style 属性

CSS | border-block-style 属性用于设置网页元素的块方向边框(即垂直方向的边框)，取值与 border-style 属性相同。

语法

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

属性值

• none：无边框
• hidden：隐藏边框
• dotted：点状边框
• dashed：虚线边框
• solid：实线边框（默认值）
• double：双线边框
• groove：3D凹槽边框
• ridge：3D凸起边框
• inset：3D内嵌边框
• outset：3D外嵌边框
• initial：使用默认值
• inherit：从父元素继承值

注意事项

• 如果要分别设置网页元素的水平方向(border-inline-style)和垂直方向(border-block-style)的边框，可以使用 border-top-style、border-right-style、border-bottom-style、border-left-style 这四个属性，分别设置上、右、下、左四个方向的边框。
• border-block-style 属性不影响行内元素。
• 对于一个元素，如果同时指定了 border-block-style 和 border-style 属性，border-block-style 属性会覆盖 border-style 属性。

示例

/*设置垂直边框样式*/
div {
  border-top-style: double;
  border-bottom-style: dotted;
  border-left-style: solid;
  border-right-style: solid;
  border-block-style: groove;
}

参考文献

• MDN web docs