竖排文字右侧边框宽度为何不生效？检查 border-block-end-width 属性
竖排文字布局中右侧边框宽度未生效时，应检查 border-block-end-width 属性是否正确设置。
检查竖排文字的书写模式与边框映射关系
竖排文字布局中，边框宽度可能未生效，首先需要确认元素的 writing-mode 属性是否设置为竖排模式。MDN 文档指出，border-block-end-width 定义的是逻辑块尾边框的宽度，它会根据元素的 writing-mode、direction 和 text-orientation 自动映射到物理边框属性。如果 writing-mode 未设置为 vertical-lr 或 vertical-rl，该属性可能无法正确映射到右侧边框，导致宽度设置无效。检查时，确保 writing-mode 的值与预期的竖排方向一致，这是排查问题的第一步。
在竖排模式下，border-block-end-width 会根据文本方向映射到不同的物理边框。例如，当 writing-mode 为 vertical-lr 时，逻辑块尾对应右侧边框，即 border-right-width；当 writing-mode 为 vertical-rl 时，逻辑块尾对应左侧边框。如果映射关系不匹配，可能导致边框宽度未生效。验证时，可以对比 border-right-width 的设置是否与预期一致，确认属性映射逻辑是否正确执行。
验证 border-block-end-width 的具体数值与语法
确认书写模式正确后，需检查 border-block-end-width 的具体数值是否符合语法要求。MDN 文档显示，该属性接受非负长度值或关键字 thin、medium、thick，默认值为 medium。如果设置了无效的值，如负数或未定义的关键字，边框宽度将无法生效。建议使用明确的长度单位如 4px 或 5px，以确保浏览器能够正确解析并应用宽度。检查代码时，确保没有拼写错误或语法错误，例如遗漏单位或使用了错误的属性名。
除了数值本身，还需确认 border-block-end-width 是否被其他样式覆盖。MDN 提到，该属性是逻辑属性，会映射到物理属性如 border-right-width。如果物理属性被其他样式规则显式设置，可能会覆盖逻辑属性的值。验证时，可以查看计算后的样式，确认 border-right-width 的最终值是否与预期一致。如果发现冲突，需调整样式优先级或统一使用逻辑属性。
排查边框样式与背景颜色的干扰因素
边框宽度未生效有时可能与边框样式或背景颜色有关。MDN 示例中显示，border 属性可以同时设置边框样式和颜色，如果 border 属性的值不完整，可能导致边框宽度无法显示。例如，如果 border 设置为 0 solid crimson，边框宽度会被固定为 0，即使 border-block-end-width 设置了其他值。检查时，确保 border 属性的值包含有效的宽度，或单独设置 border-block-end-width 而不依赖简写属性。
背景颜色也可能干扰边框的显示效果。MDN 示例中使用了 palegreen 作为背景色，如果背景色与边框颜色过于接近，可能导致边框宽度不明显。验证时，可以临时更改背景色或边框颜色，观察边框是否正常显示。此外，确保元素的 padding 和 width 设置合理，避免边框被内容挤压或超出容器范围。
使用浏览器开发者工具验证计算后的样式
最后，使用浏览器开发者工具验证计算后的样式是确认问题的有效方法。在开发者工具中，选中目标元素，查看计算后的样式面板，确认 border-block-end-width 的值是否正确应用，以及映射后的物理属性（如 border-right-width）的值是否符合预期。如果计算后的样式显示值与设置值不一致，可能是浏览器兼容性问题或样式冲突导致的。MDN 文档提到，该属性自 2020 年 1 月起在主流浏览器中广泛可用，但仍需检查当前浏览器的兼容性。
如果计算后的样式显示正常但视觉上边框未生效，可能是渲染问题。建议检查元素的渲染上下文，确保没有 CSS 降级或回退样式影响边框显示。此外，可以尝试重置其他样式或简化布局，排除其他因素干扰。通过逐步排查，可以定位并解决竖排文字右侧边框宽度未生效的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。