竖排文字底部边框样式为何不生效？检查 border-block-end-style 属性
竖排文字底部边框样式未生效通常是因为使用了物理属性而非逻辑属性，导致在 writing-mode 变化时失效。
确认竖排文字的 writing-mode 设置
竖排文字布局通常通过 writing-mode: vertical-rl 或 vertical-lr 属性实现。在竖排模式下，文档流方向发生改变，原本的物理方向（如 bottom）会根据文本流向重新映射。如果 CSS 中直接使用了 border-bottom 等物理属性，在竖排模式下可能无法正确渲染。检查元素是否设置了 writing-mode 属性，确认其值是否为竖排模式。
MDN 文档指出，border-block-end 是一个逻辑属性，它会根据 writing-mode、direction 和 text-orientation 的值，映射到 border-top、border-right、border-bottom 或 border-left。这意味着在竖排模式下，border-block-end 实际上可能对应的是容器的右侧边框。因此，直接设置 border-bottom 可能无法达到预期效果，需要使用 border-block-end 来确保样式在竖排模式下正确应用。
使用 border-block-end 简写属性替代物理属性
当 writing-mode 设置为竖排时，应使用 border-block-end 属性来设置底部边框的样式。该属性是 border-block-end-style、border-block-end-width 和 border-block-end-color 的简写。通过使用简写属性，可以一次性设置边框的宽度、样式和颜色，简化代码并减少错误。例如，设置 border-block-end: 5px dashed blue 可以同时定义边框的宽度、样式和颜色。
MDN 示例展示了在 writing-mode: vertical-rl 下，使用 border-block-end: 5px dashed blue 的效果。这表明在竖排模式下，该属性会自动映射到正确的物理边框。如果之前使用的是 border-bottom，可能因为映射错误导致样式未生效。改用 border-block-end 后，浏览器会根据当前的 writing-mode 正确计算边框位置，从而解决样式不显示的问题。
验证边框样式是否正确应用
在浏览器开发者工具中，选中应用了竖排文字样式的元素，检查计算后的样式。查看 border-block-end 属性的值是否与预期一致，以及它是否正确映射到了对应的物理属性（如 border-right）。同时，检查 writing-mode 的值是否为竖排模式。如果 border-block-end 的值显示为 none 或未定义，说明样式未正确应用，需要检查 CSS 代码中的语法或继承关系。
MDN 文档提到，border-block-end 的初始值为 medium、none 和 currentcolor。如果样式未生效，可能是由于继承或覆盖问题。确保在样式中明确指定了 border-block-end 的值，而不是依赖默认值。此外，检查是否有其他样式规则覆盖了该属性。通过开发者工具的样式面板，可以清晰地看到哪些属性被应用，哪些被覆盖，从而快速定位问题。
排查其他可能影响边框显示的因素
除了 writing-mode 和属性选择外，还需检查元素的盒模型设置。如果设置了 overflow: hidden 或 padding 值过大，边框可能被裁剪或隐藏。此外，确保元素的背景色与边框颜色有足够的对比度，否则边框可能不明显。MDN 提到，border-block-end 应用于所有元素，但如果元素本身不可见或被隐藏，边框也不会显示。
最后，检查浏览器的兼容性。MDN 指出，border-block-end 在 2020 年 1 月起在多个浏览器中广泛可用。如果使用的是非常旧的浏览器版本，可能不支持该属性。在这种情况下，可以考虑使用物理属性作为回退方案，或者使用特性检测来确保代码在旧浏览器中也能正常工作。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。