移动端竖排文字底部边框颜色为何不生效？检查 border-block-end-color 属性
当网页使用竖排文字布局时，底部边框颜色可能无法正确显示，这通常是因为使用了物理边框属性而非逻辑属性。
竖排文字底部边框颜色错位的原因
在移动端网页中，如果使用了竖排文字布局，浏览器会根据 writing-mode、direction 和 text-orientation 属性将逻辑边框映射到物理边框。border-block-end-color 定义的是逻辑块尾边框的颜色，它会根据当前的书写模式自动对应到 border-top-color、border-right-color、border-bottom-color 或 border-left-color。如果直接使用 border-bottom-color 等物理属性，在竖排模式下可能无法正确映射到视觉上的底部，导致颜色错位或显示异常。
MDN 文档指出，该属性定义了元素逻辑块尾边框的颜色，具体映射关系取决于 writing-mode、direction 和 text-orientation 的值。例如，当 writing-mode 为 vertical-rl 时，逻辑块尾边框对应的是物理右侧边框。如果开发者未使用逻辑属性，而是依赖物理属性，在切换书写模式或方向时，边框颜色可能会出现在错误的位置，从而造成视觉上的错位。
排查边框颜色错位的步骤
首先，在浏览器开发者工具中选中出现问题的元素，查看其计算后的样式。检查 writing-mode 的当前值，确认是否为竖排模式。然后，对比逻辑属性 border-block-end-color 和物理属性 border-bottom-color 的值，确认逻辑属性是否已正确设置。如果逻辑属性已设置但颜色未生效，可能是浏览器兼容性问题，因为该属性自 2020 年 1 月起在主流浏览器中广泛可用。
其次，检查元素的边框样式是否完整。MDN 示例显示，border-block-end-color 需要配合 border 属性使用，否则可能无法显示。确保元素的 border 属性已定义，且 border-block-end-color 的值是有效的颜色值，如 red、#32a1ce 或 rgb(170 50 220 / 0.6)。如果 border 属性未设置，边框颜色将不会渲染。
验证边框颜色显示的方法
在开发者工具的样式面板中，修改 border-block-end-color 的值，观察元素边框颜色的实时变化。如果边框颜色随修改而变化，说明逻辑属性生效。然后，切换 writing-mode 的值，例如从 horizontal-tb 改为 vertical-rl，再次检查边框颜色是否映射到正确的物理边框。如果边框颜色在切换模式后保持不变，说明逻辑属性正确处理了映射关系。
使用 MDN 提供的示例代码进行测试。创建一个 div 元素，设置 writing-mode: vertical-rl 和 border: 10px solid blue，然后添加 border-block-end-color: red。在浏览器中渲染后，观察边框颜色是否显示为红色。如果显示正确，说明 border-block-end-color 在竖排模式下正确映射到了物理边框。如果显示为蓝色，说明逻辑属性未生效，可能需要检查浏览器兼容性或 CSS 语法。
解决边框颜色错位的操作
将直接使用物理边框属性的代码替换为逻辑属性。例如，将 border-bottom-color: red 替换为 border-block-end-color: red。这样可以确保边框颜色在切换书写模式时自动映射到正确的物理边框。同时，确保 CSS 语法正确，包括颜色值的格式和全局值的正确使用，如 inherit、initial、revert 或 unset。
如果问题仍然存在，检查浏览器的兼容性。MDN 文档显示，该属性自 2020 年 1 月起在主流浏览器中可用，但某些旧版本浏览器可能不支持。如果目标用户群体使用旧版浏览器，可以考虑使用回退方案，如同时设置 border-block-end-color 和 border-bottom-color，以确保兼容性。此外，确保 CSS 逻辑属性模块级别 1 的规范已正确应用，避免语法错误。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。