border-inline-start 在 writing-mode: horizontal-tb 且 direction: ltr 时映射为 border-left；它依据块容器的书写模式和方向动态决定起始侧，无需显式设置 writing-mode 即可生效，但要求元素参与块格式化上下文。
border-inline-start 是 CSS 逻辑边框属性，它不绑定物理方向（如 left/right），而是根据元素的书写模式（writing-mode）和文本方向（direction）动态决定“起始侧”在哪。直接用它比硬写 border-left 或 border-top 更健壮，尤其在多语言、垂直排版或 RTL 场景下。
什么时候 border-inline-start 会变成左边框？
它取决于当前块容器的 writing-mode 和 direction 组合：
- 默认值：
writing-mode: horizontal-tb; direction: ltr→ 起始侧 = 左侧 → 实际渲染为border-left -
writing-mode: horizontal-tb; direction: rtl→ 起始侧 = 右侧 → 渲染为border-right -
writing-mode: vertical-rl（中文竖排常见）→ 起始侧 = 顶部 → 渲染为border-top -
writing-mode: vertical-lr→ 起始侧 = 底部 → 渲染为border-bottom
注意：border-inline-start 不继承父级的 direction，只看**自身所在块容器**的格式化上下文。
必须配 writing-mode 才能生效吗？
不需要显式设置 writing-mode。只要浏览器识别出当前上下文的逻辑方向（包括根元素默认的 horizontal-tb + ltr），border-inline-start 就能解析。但如果你发现它没效果，大概率是以下原因：
- 父容器用了
display: inline—— 逻辑边框只对参与块格式化上下文的元素生效（block、inline-block、flex、grid等） - CSS 重置库（如 Normalize.css）覆盖了逻辑属性，可加
!important快速验证 - 旧版 Safari（@supports 回退
推荐写法：
.box {
border-inline-start: 2px solid #333;
}
@supports not (border-inline-start: 1px) {
.box {
border-left: 2px solid #333;
}
}
和 border-block-start 搭配使用要注意什么？
两者是正交关系：inline 指行内方向（文字流方向），block 指块方向（换行方向）。在水平书写模式下：
-
border-inline-start≈border-left -
border-block-start≈border-top
但在 writing-mode: vertical-rl 下会翻转：
-
border-inline-start→ 顶部 -
border-block-start→ 右侧（因为块方向现在是向右）
所以不要凭直觉猜，用 getComputedStyle(el).borderInlineStartWidth 在控制台实时查实际解析值更可靠。
真正容易被忽略的是：逻辑边框的「宽度」和「样式」支持所有传统值（thin/medium/thick、dashed 等），但「颜色」若设为 currentcolor，取的是元素自身的 color，不是父级的——这点和物理边框一致，但常被误以为会随方向变化而变色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
