CSS | border-inline-end-style 属性

简述

CSS 的 border-inline-end-style 属性设置块的内联结束边框的样式。它是 border-inline-end 属性的缩写，其它值已设置为默认值，例如 border-inline-end-width 和 border-inline-end-color。

这个属性适用于块级元素和表格单元格（在这种情况下，它适用于内联结束边框），但不适用于 flexbox 容器，因为在那里内联方向和块方向没有定义明确的含义。

语法

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

值

• none: 无边框。
• hidden: 边框被隐藏。
• dotted: 点状边框。
• dashed: 虚线边框。
• solid: 实线边框。
• double: 双边框。有两个实线占据相邻的边框。空格被留给边框之间的3D效果。
• groove: 3D沟槽效果。由一个凹陷将其边框内的颜色和另一个凸起的颜色隔开所组成。看上去像是在查看来自屏幕的另一个空间的东西。边框是实线。
• ridge: 3D脊线效果。由两个颜色分隔开，看上去像一条脊线。边框是实线。
• inset: 3D凹效果。由一个凹陷边框和一个凸起边框组成。边框是实线。
• outset: 3D立体效果，由一个凸起边框和一个凹陷边框组成。边框是实线。
• initial: 默认值为 none，可在文档中全局调用。
• inherit: 从父元素继承 border-inline-end-style 属性。

示例

.example {
  border-inline-end-style: dotted;
}

兼容性

这个属性的兼容性请参考 Can I Use。

总结

border-inline-end-style 属性可以设置块的内联结束边框的样式，它是 border-inline-end 属性的缩写，你可以通过它来精确控制块的内联结束边框的样式，从而让你的页面更加美观和易于阅读。