竖排文字布局中 border-block-color 颜色为何不生效？
竖排文字布局中 border-block-color 不生效通常是因为 writing-mode 属性未正确设置，导致逻辑边框无法映射到物理边框。
检查 writing-mode 属性是否设置为竖排模式
border-block-color 是逻辑属性，其作用取决于 writing-mode、direction 和 text-orientation 的值。在默认的水平文字模式下，border-block-color 对应 border-top-color 和 border-bottom-color。若要实现竖排效果，必须将 writing-mode 设置为 vertical-lr 或 vertical-rl。如果未设置竖排模式，浏览器会按照默认逻辑处理，导致竖向边框颜色无法按预期显示。检查代码中是否包含 writing-mode: vertical-lr; 或 writing-mode: vertical-rl; 是排查的第一步。
在 MDN 的示例中，当 writing-mode 为 vertical-lr 时，border-block-color: red; 会将边框颜色应用到垂直方向。若该属性不生效，可能是 CSS 层叠规则覆盖了定义，或者父元素未应用该属性。建议在浏览器开发者工具中检查元素的计算样式，确认 writing-mode 的值是否生效，以及 border-block-color 是否被正确解析。
确认 border-block-color 是否被其他样式覆盖
即使设置了正确的 writing-mode，border-block-color 也可能被其他 CSS 规则覆盖。例如，如果同时定义了 border-top-color 或 border-bottom-color，浏览器可能会优先使用这些物理属性。border-block-color 是逻辑属性的简写，它会映射到具体的物理属性，但如果显式定义了物理属性，可能会产生冲突。检查 CSS 文件中是否存在 border-top-color 或 border-bottom-color 的定义，并确认它们的优先级是否高于 border-block-color。
可以通过移除其他边框颜色定义，仅保留 border-block-color 来测试。如果此时颜色生效，说明之前的样式覆盖导致了问题。此外，检查是否有 !important 标记或其他层叠规则影响了该属性。确保 border-block-color 的定义位于其他可能覆盖它的规则之后，或者使用 !important 提高其优先级（但需谨慎使用）。
验证浏览器对 border-block-color 的兼容性
border-block-color 是 CSS Logical Properties and Values 模块的一部分，其广泛可用性始于 2021 年 4 月。虽然现代浏览器已支持该属性，但某些旧版本或特定设备可能存在兼容性问题。如果测试环境使用了较旧的浏览器或移动设备，可能需要检查兼容性列表。MDN 提到该功能在许多设备和浏览器版本中表现良好，但具体表现可能因设备而异。
在移动端开发中，建议使用现代浏览器或进行实际设备测试。如果发现某些设备上颜色不生效，可以尝试使用前缀属性如 -webkit-border-block-color，或者回退到物理属性如 border-left-color 和 border-right-color。确保在目标设备上验证效果，以避免兼容性问题导致的显示异常。
使用开发者工具检查计算样式与实际渲染
浏览器开发者工具是排查 CSS 属性不生效的有效工具。在元素面板中，选择目标元素并查看计算样式，确认 border-block-color 的值是否正确应用。同时，检查 writing-mode 的值是否生效，以及是否被其他属性修改。如果计算样式中显示 border-block-color 为空或无效，说明 CSS 定义可能存在问题。
还可以通过调整 writing-mode 的值来观察边框颜色的变化。例如，将 writing-mode 从 horizontal-tb 切换到 vertical-lr，查看边框颜色是否随之改变。如果切换后颜色生效，说明问题出在 writing-mode 的设置上。通过反复测试和调整，可以快速定位并解决 border-block-color 不生效的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。