CSS | border-block-start-style 属性

CSS | border-block-start-style 属性是指设置块级元素顶部（从左到右，或从右到左）边框的样式，可以是实线、虚线、点线、双线或无。

语法

border-block-start-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：从父元素继承该属性。

示例

/* 将块级元素的顶部边框设置为实线 */
.example {
  border-block-start-style: solid;
}

浏览器兼容性

| Chrome | Firefox | Safari | Opera | Edge | IE | | ------ | ------- | ------ | ----- | ---- | -- | | 57+ | 52+ | 10.1+ | 44+ | 15+ | 未支持 |

总结

CSS | border-block-start-style 属性允许开发者设置块级元素顶部（从左到右，或从右到左）边框样式。它的值有很多种，包括实线、虚线、点线、双线、无、3D凸出样式、3D凹陷样式等。使用该属性能够为网站添加一些视觉上的效果，使之更显美观。