竖排文字边框样式未生效？检查 border-block 简写属性
竖排文字布局中边框样式不显示通常是因为使用了简写属性但未指定样式类型，导致浏览器默认应用 none。
确认 writing-mode 与 border-block 的映射关系
在竖排文字布局中，writing-mode: vertical-rl 属性决定了文本从上到下排列。此时 border-block 简写属性会同时设置块轴起始和末端的边框样式。如果只设置了颜色或宽度而未指定样式类型，浏览器会根据默认值渲染边框。MDN 文档指出，border-block 是 border-block-width、border-block-style 和 border-block-color 的简写属性，必须指定样式类型才能生效。
当 writing-mode 为 vertical-rl 时，border-block 对应的物理边框是右侧和左侧。这意味着设置 border-block: red 实际上会同时影响左右两侧的边框颜色。如果页面中只希望右侧边框有样式，需要单独设置 border-block-end 属性。检查元素是否应用了正确的 writing-mode 是排查边框不显示的第一步，可以通过开发者工具的 Styles 面板确认属性值。
检查 border-block 简写属性是否包含样式类型
border-block 简写属性要求至少指定一个值，且值的顺序可以是宽度、样式或颜色的任意组合。如果只写了 border-block: 5px，浏览器会将其解析为宽度，而样式类型默认为 none，导致边框不可见。MDN 文档中的示例显示，border-block: 1rem solid 是正确的写法，其中 solid 明确指定了边框样式。开发者应确保简写属性中包含样式类型，如 dashed、dotted 或 solid。
在移动端开发中，竖排文字常用于标题或特殊排版。如果边框样式未生效，可能是简写属性中遗漏了样式类型。可以通过浏览器开发者工具的 Computed 面板查看 border-block 的计算值，确认样式类型是否为 none。如果计算值显示为 none，说明简写属性中未指定样式类型，需要修改 CSS 代码添加样式类型。
验证边框样式的计算值与渲染效果
CSS 属性的计算值决定了最终渲染效果。border-block 简写属性的计算值取决于 writing-mode 和 direction。在竖排模式下，border-block 的计算值会映射到 border-right 和 border-left 属性。如果计算值显示为 none，说明样式类型未被正确应用。可以通过浏览器开发者工具的 Computed 面板查看 border-block 的计算值，确认样式类型是否为 none。
为了验证边框样式是否正确显示，可以在移动端页面中创建一个竖排文字元素，并设置 writing-mode: vertical-rl 和 border-block: 5px dashed blue。使用浏览器开发者工具的 Elements 面板选中该元素，查看 Styles 面板中的 border-block 属性值。然后，切换到 Computed 面板，确认计算值是否为 5px dashed blue。如果计算值正确但视觉上边框未显示，可能是边框宽度或样式未设置，需要检查 border-block-width 和 border-block-style 属性。
复现与排查步骤
首先，在移动端页面中创建一个竖排文字元素，并设置 writing-mode: vertical-rl 和 border-block: 5px dashed blue。使用浏览器开发者工具的 Elements 面板选中该元素，查看 Styles 面板中的 border-block 属性值。然后，切换到 Computed 面板，确认计算值是否为 5px dashed blue。
如果计算值正确但视觉上边框未显示，可能是边框宽度或样式未设置。检查 border-block-width 和 border-block-style 属性，确保它们有明确的值。如果边框样式仍然未生效，尝试移除其他可能影响边框的样式，如 border-inline-end-color 或 border-color。通过逐步排除干扰因素，可以准确定位问题所在。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。