CSS border-inline-style 属性

主题

定义和用法

border-inline-style属性用于设置元素在其行内方向上的边框样式。

border-inline-style属性的具体物理表现取决于文档的书写模式（writing-mode）、文本方向（direction）和文本朝向（text-orientation）。

默认值：	none
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderInlineStyle="dotted"Demo ❯

下面通过演示实例，让你更直观地了解border-inline-style属性的用法。

1. 为行内方向起始处的边框设置宽度：

实例代码运行代码

复制

div {
    border-inline-style: solid dotted;
    border-inline-width: 10px;
}

2. 行内方向起始处边框的位置受direction属性的影响：

实例代码运行代码

复制

div {
    direction: rtl;
    border-inline-style: solid dotted;
}

3. 行内方向起始处边框的位置受writing-mode属性的影响：

实例代码运行代码

复制

div {
    border-inline-width: 10px;
    writing-mode: vertical-rl;
    border-inline-style: solid dotted;;
}

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

值	描述
`none`	指定无边框（默认值）。
`hidden`	与 none 相同，但在表格元素的边框冲突解决中有所不同。
`dotted`	指定点状边框。
`dashed`	指定虚线边框。
`solid`	指定实线边框。
`double`	指定双线边框。
`groove`	指定 3D 凹槽边框。效果取决于 border-color 的值。
`ridge`	指定 3D 凸起边框。效果取决于 border-color 的值。
`inset`	指定 3D 内嵌边框。效果取决于 border-color 的值。
`outset`	指定 3D 外凸边框。效果取决于 border-color 的值。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。