竖排文字顶部边框颜色为何不生效？检查 border-block-start-color 属性
竖排文字顶部边框颜色不生效通常是因为 writing-mode 设置错误或 border-block-start-color 属性值无效。
确认 writing-mode 是否设置为竖排模式
竖排文字的边框方向由 writing-mode 属性决定。只有将 writing-mode 设置为 vertical-rl 或 vertical-lr 时，border-block-start 才会映射到文字的顶部边框。如果 writing-mode 保持默认的 horizontal-tb，该属性会映射到元素的顶部边框，而非文字的顶部。在移动端调试时，首先检查元素的 CSS 样式表，确认 writing-mode 的值是否正确设置为竖排模式。
MDN 文档指出，border-block-start 是一个逻辑属性，它会根据 writing-mode、direction 和 text-orientation 的值映射到具体的物理边框属性。当 writing-mode 为 vertical-rl 时，该属性对应于 border-right。这意味着在竖排文字中，逻辑上的“起始块”实际上是水平方向上的右侧。因此，错误的 writing-mode 设置会导致边框应用到了错误的物理位置，从而造成样式不生效的假象。
检查 border-block-start-color 的具体值与语法
border-block-start-color 属性用于定义边框的颜色，其值必须符合 CSS 规范中定义的颜色关键字或十六进制代码。有效的值包括关键字如 red、blue，以及十六进制代码如 #32a1ce。如果使用了无效的值，或者将值设置为 none，边框将不会显示。在移动端开发中，常见的错误是将值设置为字符串而非关键字，或者遗漏了该属性。
MDN 提供的语法示例显示，该属性可以接受线宽、线型和颜色的组合。例如，border-block-start: 5px dashed blue; 是一个有效的声明。如果只设置了宽度或样式而没有设置颜色，浏览器会使用默认的 currentcolor。因此，排查时需要确保样式中明确指定了颜色关键字，并且该关键字位于语法允许的位置。
验证浏览器对 logical properties 的支持情况
虽然 logical properties（逻辑属性）在 2020 年 1 月起已在许多浏览器中广泛可用，但移动端浏览器版本可能存在差异。如果目标设备使用的浏览器版本较老，可能不支持 border-block-start-color 或其子属性。此时，浏览器会忽略该属性，导致边框颜色不生效。在移动端开发中，需要确认目标用户的浏览器兼容性列表。
MDN 文档提到该特性在许多设备上广泛可用，但建议查阅具体的浏览器兼容性表格。如果浏览器不支持 logical properties，开发者可能需要回退到使用物理属性，如 border-top-color 或 border-right-color，以确保边框在所有设备上都能正确显示。
使用开发者工具进行复现与结果判断
在移动端浏览器中打开开发者工具，选中应用了竖排文字样式的元素。在样式面板中，展开 border-block-start-color 属性，检查其值是否正确。如果值显示为无效或被划掉，说明浏览器不支持或解析错误。同时，检查 writing-mode 的值是否被正确应用。如果 writing-mode 为 vertical-rl，边框应该出现在文字的右侧，而非顶部。
为了验证结果，可以临时将 border-block-start-color 替换为 border-right-color，并观察边框是否出现。如果替换后边框显示正常，说明问题出在 logical properties 的映射上，而非样式值本身。如果替换后边框依然不显示，则需要进一步检查元素的宽度、高度、背景色以及是否有其他 CSS 规则覆盖了边框样式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。