定义和用法
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 教程:CSS 边框
CSS 参考手册:CSS border 属性
CSS 参考手册:CSS border-block 属性
CSS 参考手册:CSS border-block-style 属性
CSS 参考手册:CSS border-block-start-style 属性
CSS 参考手册:CSS border-top-style 属性
CSS 参考手册:CSS border-right-style 属性
CSS 参考手册:CSS border-bottom-style 属性
CSS 参考手册:CSS border-left-style 属性
CSS 参考手册:CSS writing-mode 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
24
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈