竖排文字布局中 border-block-end-color 为何不生效
竖排文字布局中 border-block-end-color 不生效通常是因为 writing-mode 设置错误或未正确映射到物理边框属性。
检查 writing-mode 属性是否设置为竖排模式
border-block-end-color 是逻辑属性，其显示效果取决于 writing-mode、direction 和 text-orientation 的组合。如果 writing-mode 未设置为竖排模式，该属性不会映射到预期的物理边框颜色。例如，当 writing-mode 为 horizontal-tb 时，border-block-end-color 对应的是 border-bottom-color。只有当 writing-mode 为 vertical-lr 或 vertical-rl 时，它才对应右侧或左侧的边框颜色。
在移动端网页开发中，竖排文字常用于标题或特殊排版。若发现竖排文字的右侧边框颜色未按预期显示，首先应检查 CSS 中 writing-mode 的值。确保其明确设置为 vertical-lr（从左到右竖排）或 vertical-rl（从右到左竖排）。如果 writing-mode 值错误或缺失，逻辑属性将无法正确映射，导致颜色设置无效。
验证 border 属性是否覆盖了逻辑属性设置
CSS 中 border 属性是一个简写属性，它会同时设置边框的宽度、样式和颜色。如果同时定义了 border 属性和 border-block-end-color 属性，border 属性的值可能会覆盖逻辑属性的颜色设置。例如，如果设置了 border: 10px solid blue，那么 border-block-end-color 的红色设置将被忽略，因为简写属性优先级更高。
排查时，应检查 CSS 规则中是否存在简写属性 border。如果存在，需要将其拆分为具体的逻辑属性或物理属性。例如，将 border: 10px solid blue 改为 border-width: 10px; border-style: solid; border-color: blue; 或者仅设置 border-block-end-color: red; 并移除简写属性。这样可以确保逻辑属性的颜色设置能够生效。
确认元素是否应用了继承或重置样式
border-block-end-color 的初始值是 currentcolor，这意味着它会继承父元素的文本颜色。如果父元素的文本颜色被重置或设置为透明，那么边框颜色也会受到影响。此外，如果使用了 CSS 重置库或全局样式，可能会将所有元素的边框颜色设置为默认值，导致自定义设置不生效。
可以通过检查父元素的 color 属性和继承链来确认问题。如果父元素的 color 值不正确，可以尝试显式设置 border-block-end-color 的值，或者使用 !important 来覆盖继承的样式。同时，确保没有其他全局样式规则错误地重置了边框颜色。
使用浏览器开发者工具检查计算后的样式
浏览器开发者工具可以显示元素最终应用的 CSS 样式，包括计算后的值。在移动端网页调试时，可以通过开发者工具的“计算样式”面板查看 border-block-end-color 的实际值。如果显示为“currentcolor”或被其他属性覆盖，说明样式设置存在问题。
在开发者工具中，选中竖排文字元素，查看“计算样式”面板中的 border-block-end-color 属性。如果发现其值为“currentcolor”或被其他属性覆盖，可以进一步检查 CSS 规则的优先级和继承关系。通过这种方式，可以快速定位并修复样式不生效的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。