竖排文字布局中 border-block-start 颜色为何不生效？
border-block-start 颜色设置未生效通常是因为简写属性中遗漏了 color 值，导致颜色被重置为默认值。
逻辑边框颜色映射与默认值机制
border-block-start 是一个逻辑属性简写，用于设置块起始边的颜色、样式和宽度。根据 MDN 资料，该属性对应 border-top、border-right、border-bottom 或 border-left 中的一个物理属性，具体映射取决于 writing-mode、direction 和 text-orientation 的值。当仅设置 border-block-start: 5px solid 时，虽然指定了宽度和样式，但未明确指定颜色。在这种情况下，颜色值会继承自初始值 currentcolor，可能导致显示效果与预期不符。
如果 border-block-start 属性中未包含颜色值，浏览器会使用默认的 none 样式和 medium 宽度，颜色则由 currentcolor 决定。这意味着如果父元素或全局样式中未明确设置颜色，边框可能呈现为不可见或与背景色相同。因此，在竖排文字布局中，仅设置宽度和样式而不指定颜色，可能导致颜色设置看似“不生效”或显示异常。
排查颜色未生效的具体步骤
首先，检查 CSS 代码中 border-block-start 的完整属性值。确保包含颜色、样式和宽度，例如 border-block-start: 5px solid blue。如果仅设置了 border-block-start: 5px solid，颜色可能未明确指定，导致显示异常。接着，使用浏览器开发者工具选中目标元素，查看计算后的样式。确认 border-block-start-color 的值是否符合预期，例如 blue。如果 border-block-start-color 显示为 currentcolor 或未定义，可能需要显式设置颜色值。
如果 border-block-start 已设置颜色但未生效，可能是 CSS 优先级问题。检查是否有其他规则覆盖了该属性，例如 border-block-start: none 或 border-block-start-color: transparent。确保样式规则具有足够的优先级，或者使用 !important 调整（但需谨慎使用）。此外，验证 writing-mode 是否正确设置为竖排模式，例如 vertical-rl 或 vertical-lr，以确保逻辑属性正确映射到物理边框。
验证颜色显示效果的测试方法
在浏览器中打开网页，使用开发者工具选中目标元素，查看其计算后的样式。确认 border-block-start-color 的值是否符合预期，例如 blue。同时，检查 border-block-start-style 是否为 solid 或其他可见样式。如果 border-block-start-color 显示为 currentcolor 或未定义，可能需要显式设置颜色值。可以通过修改 CSS 代码并刷新页面，观察边框颜色是否发生变化。
为了验证颜色是否位于正确的位置，可以在竖排文字布局中添加多个元素，分别设置不同的 border-block-start 颜色值。例如，第一个元素设置 blue，第二个元素设置 red。观察边框颜色的差异，确认颜色是否位于文字块的起始位置。如果颜色位置错误或显示异常，可能是 writing-mode 或 direction 属性设置不当，需要调整这些属性以确保逻辑属性正确映射。
常见错误与修正建议
常见错误包括仅设置 border-block-start 的宽度和样式而未指定颜色，导致颜色显示异常。修正方法是明确指定颜色值，例如 border-block-start: 5px solid blue。此外，如果 border-block-start-color 的值未正确应用，可能是 CSS 优先级问题。确保样式规则具有足够的优先级，或者使用 !important 调整（但需谨慎使用）。
另一个常见问题是 border-block-start 属性的简写形式中遗漏了颜色值。例如，仅设置 border-block-start: 5px solid，而未指定颜色，边框颜色可能显示为默认值。修正方法是明确指定颜色，例如 border-block-start: 5px solid blue。此外，检查浏览器兼容性，确保目标浏览器支持 border-block-start 属性。根据 MDN 的信息，该属性在 2020 年 1 月起在多个浏览器中广泛可用。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。