
定义和用法
border-block-start
是一个 CSS 逻辑属性,用于在不考虑特定书写模式、方向或文本朝向的情况下设置元素的逻辑起始边框。在 CSS 的逻辑属性模型中,"block" 方向指的是文本在页面中垂直堆叠的方向(与 "inline" 方向相对,后者是文本的水平流动方向)。
使用这个属性可以让你的 CSS 更加灵活,尤其是在开发需要支持多种语言和书写模式的国际化网站时。
默认值: | medium none currentcolor |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.borderBlockStart="pink dotted 5px" |
常用的实例
接下来通过多个实例演示border-block-start
属性的用法,来深化您对border-block-start
属性的理解。
1. 设置块方向起始处的边框宽度、颜色和样式:
div {
border-block-start: 10px solid pink;
}
2. 块方向起始处边框的位置受writing-mode
属性的影响:
div {
writing-mode: vertical-rl;
border-block-start: dotted blue;
}
CSS 语法
border-block-start: border-block-start-width border-block-start-style border-block-start-color|initial|inherit;
属性值
值 | 描述 |
border-block-start-width |
指定元素在块方向起始处的边框宽度(默认值)。 |
border-block-start-style |
指定元素在块方向起始处的边框样式(默认值为 none)。 |
border-block-start-color |
指定元素在块方向起始处的边框颜色(默认值为边框的当前颜色)。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持border-block-start
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
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-color 属性
CSS 参考手册:CSS border-block-start-color 属性
CSS 参考手册:CSS border-top-color 属性
CSS 参考手册:CSS border-right-color 属性
CSS 参考手册:CSS border-bottom-color 属性
CSS 参考手册:CSS border-left-color 属性
CSS 参考手册:CSS writing-mode 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
61
章节
2
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈