竖排文字右侧边框颜色错位？检查 border-block-end-color 属性
当 writing-mode 设置为 vertical-rl 时，border-block-end-color 可能映射到右侧边框，导致颜色显示异常。
确认 writing-mode 对边框映射的影响
border-block-end 是一个逻辑属性，其具体表现取决于元素的 writing-mode、direction 和 text-orientation。在水平文本布局中，writing-mode 为 horizontal-tb，border-block-end 通常映射到 border-bottom。而在竖排文本布局中，writing-mode 为 vertical-rl 或 vertical-lr，border-block-end 会映射到 border-right 或 border-left。这种映射关系决定了边框在视觉上的位置。如果元素使用了竖排文字，且未指定具体的 writing-mode，浏览器可能使用默认的 horizontal-tb，导致边框位置与预期不符。
为了确认 writing-mode 的设置是否正确，可以在开发者工具中检查元素的 writing-mode 属性。如果设置为 vertical-rl，边框将映射到右侧；如果设置为 vertical-lr，边框将映射到左侧。如果边框视觉上位于底部，但 writing-mode 为 vertical-rl，可能需要检查 text-orientation 或 direction 属性。确保 writing-mode 的设置与预期的边框位置一致，才能准确排查边框颜色错位的问题。
检查 border-block-end-color 的默认值设置
border-block-end 是一个简写属性，用于设置 border-block-end-width、border-block-end-style 和 border-block-end-color。其默认值由三个子属性组成：border-block-end-width 默认为 medium，border-block-end-style 默认为 none，border-block-end-color 默认为 currentcolor。当未显式设置 border-block-end-color 时，浏览器会使用 currentcolor 作为颜色值。currentcolor 是一个关键字，表示当前元素的文本颜色。如果文本颜色与背景色冲突，或者文本颜色未正确继承，可能导致边框颜色显示异常。
要验证默认值是否导致边框颜色错位，可以在浏览器开发者工具中选中对应的元素。在计算样式面板中查看 border-block-end-color 的值是否显示为 currentcolor。如果确实为 currentcolor，且视觉上边框颜色与预期不符，说明默认值设置导致了问题。此时需要显式设置 border-block-end-color 的具体颜色值，例如使用 hex 颜色代码或 rgb 值，以控制边框的显示颜色。
使用具体颜色值覆盖默认值以调整边框颜色
如果确认 border-block-end-color 的默认值 currentcolor 导致边框颜色错位，可以通过显式设置具体颜色值来调整。border-block-end-color 的值可以是任何有效的 CSS 颜色值，如 #000000、rgb(0,0,0) 或 red。在移动端布局中，建议使用具体的颜色值，以获得更精确的控制。关键字 currentcolor 虽然方便，但在某些情况下可能导致意外的颜色显示。
在 CSS 中，可以通过以下代码覆盖默认值：border-block-end: 1px solid #000;。这会同时设置边框的宽度、样式和颜色。如果只需要调整颜色，可以单独设置 border-block-end-color：border-block-end-color: #000;。通过这种方式，可以确保边框的颜色符合设计要求，避免默认值带来的视觉问题。
验证修改后的边框效果
修改 CSS 后，需要在浏览器中验证边框的效果。刷新页面或重新加载样式，观察竖排文字的右侧边框颜色是否正确显示。在开发者工具中，可以再次检查 border-block-end-color 的计算值，确认是否已更新为设置的数值。如果边框颜色符合预期，说明问题已解决。如果边框颜色仍然错位，可能需要检查其他相关属性，如 border-block-start 或 border-inline-end，确保没有冲突的样式设置。
此外，还可以使用浏览器的响应式设计工具模拟移动端设备，验证边框在不同屏幕尺寸下的表现。确保边框的颜色在移动端设备上不会出现错位或显示异常，影响用户体验。通过反复调整和验证，可以找到最适合的边框颜色设置。同时，建议在代码中添加注释，说明边框设置的意图，便于后续维护。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。