导航分类

Git 教程

CSS border-block-end-color 属性 CSS border-block-end-width 属性

CSS border-block-end-style 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border-block-end-style是一个 CSS 逻辑属性，用于设置元素在块级方向结束位置的边框样式。

border-block-end-style属性可以编写出更具包容性和灵活性的样式代码，减少针对不同文本方向和书写模式的特殊处理。

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

与物理属性的关系

在水平文本流（LTR）中，border-block-end-style对应于border-bottom-style；

在垂直文本流或 RTL 环境中，它可能对应于右侧或顶部边框。

常用的实例

接下来通过多个实例演示border-block-end-style:属性的用法，来深化您对border-block-end-style:属性的理解。

1. 基本用法 - 水平文本流（LTR）

实例代码运行代码

复制

.element {
    border-block-end-width: 10px;
    border-block-end-color: #f00;
    border-block-end-style: solid;
}

2. 垂直文本流

实例代码运行代码

复制

.vertical-text {
    writing-mode: vertical-rl;
    border-block-end-style: dashed;
    /* 在垂直文本中，可能表现为右侧边框 */
}

3. 从右到左文本流

实例代码运行代码

复制

.rtl-element {
    direction: rtl;
    border-block-end-style: dotted;
    /* 在RTL环境中，可能表现为顶部边框 */
}

CSS 语法

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

属性值

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

浏览器支持

表中的数字指定了完全支持border-block-end-style属性的第一个浏览器版本。


Chrome	IE / Edge	Firefox	Safari	Opera
69.0	79.0	41.0	12.1	56.0

CSS border-block-end-style 属性

定义和用法

与物理属性的关系

常用的实例

1. 基本用法 - 水平文本流（LTR）

2. 垂直文本流

3. 从右到左文本流

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS border-block-end-style 属性

定义和用法

与物理属性的关系

常用的实例

1. 基本用法 - 水平文本流（LTR）

2. 垂直文本流

3. 从右到左文本流

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功