移动端竖排文字边框颜色错位？检查 border-block-color 属性
当移动端页面使用竖排文字布局时，边框颜色可能无法正确映射到视觉边缘，需检查 border-block-color 属性的映射逻辑。
确认竖排文字模式下的边框映射规则
竖排文字布局通常通过 writing-mode 属性实现，例如 vertical-lr 或 vertical-rl。在水平书写模式下，border-block-color 会映射到 border-top-color 和 border-bottom-color。但在竖排模式下，该属性会自动映射到 border-right-color 和 border-left-color，即文字的左右两侧边框。如果边框颜色显示在错误的边缘，可能是未正确设置竖排模式或属性映射逻辑未生效。
border-block-color 是一个逻辑属性，它根据 writing-mode、direction 和 text-orientation 的值自动选择对应的物理属性。例如，在 vertical-rl 模式下，border-block-color 实际上控制的是元素右侧和左侧的边框颜色。这种映射机制确保了无论文字方向如何，边框样式都能保持一致。如果发现边框颜色未按预期显示，应首先确认 writing-mode 的设置是否正确，并检查 border-block-color 是否被其他样式覆盖。
排查边框颜色未生效的具体原因
边框颜色未生效可能由多种原因导致，包括样式优先级冲突、继承值设置错误或浏览器兼容性问题。border-block-color 的初始值为 currentcolor，这意味着如果未显式设置颜色，边框颜色将继承元素的文本颜色。如果文本颜色与背景色相同，边框将不可见。此外，如果父元素设置了 border-block-color: inherit，子元素将继承父元素的颜色值，可能导致意外的显示效果。
浏览器兼容性也是排查的重点。border-block-color 在 2021 年 4 月起在主流浏览器中广泛可用，但旧版本浏览器可能不支持该属性。如果目标用户群体使用的是旧版浏览器，可能需要回退到物理属性（如 border-right-color）或使用前缀。检查浏览器控制台是否有样式冲突警告，并确保 border-block-color 的值是有效的颜色值（如 red、#32a1ce 或 rgb(170 50 220 / 0.6)）。
验证边框颜色映射的正确性
验证边框颜色映射的正确性可以通过对比物理属性和逻辑属性来实现。在竖排模式下，显式设置 border-right-color 和 border-left-color，同时设置 border-block-color 为不同的颜色，观察两者是否一致。如果两者显示相同，说明映射逻辑正常；如果不同，可能是 border-block-color 未生效或被覆盖。可以使用浏览器开发者工具检查计算后的样式，确认 border-block-color 是否被正确解析。
另一个验证方法是使用 MDN 提供的示例代码。在 HTML 中创建一个竖排文字的 div，并应用 border-block-color: red 和 writing-mode: vertical-lr。如果边框颜色出现在文字的左右两侧，说明映射正确。如果边框颜色出现在顶部或底部，可能是 writing-mode 设置错误或浏览器不支持该属性。通过对比不同 writing-mode 值（如 horizontal-tb 和 vertical-rl）下的表现，可以进一步确认映射规则。
修复边框颜色错位的操作步骤
修复边框颜色错位的第一步是确保 writing-mode 设置正确。在 CSS 中明确指定 writing-mode: vertical-lr 或 vertical-rl，并根据需要调整 direction 和 text-orientation。然后，显式设置 border-block-color 为期望的颜色值，避免使用 inherit 或 currentcolor。如果需要兼容旧浏览器，可以同时设置 border-right-color 和 border-left-color 作为回退方案。
如果问题仍然存在，检查样式优先级和继承关系。使用 !important 或提高选择器优先级来确保 border-block-color 生效。同时，验证浏览器兼容性，必要时使用浏览器前缀或回退到物理属性。最后，使用浏览器开发者工具检查计算后的样式，确认 border-block-color 是否被正确应用。如果所有步骤均无效，可能是浏览器 Bug 或 CSS 规范问题，建议查阅 MDN 文档或提交 Bug 报告。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。