移动端竖排文字边框过粗？检查 border-block-width 默认值
竖排文字边框过粗通常是因为未显式设置宽度值，导致浏览器使用了 medium 默认值。
确认竖排文字模式下的边框映射关系
在移动端竖排文字布局中，CSS 的 logical 属性会根据 writing-mode 自动映射到物理边框。border-block-width 定义的是逻辑块方向的边框宽度，当 writing-mode 为 vertical-rl 时，它对应的是 border-right-width 和 border-left-width。如果只设置了 border-left-width 而未使用 border-block-width，可能导致左侧边框宽度与右侧不一致，从而在视觉上显得过粗。MDN 文档指出该属性会根据 writing-mode、direction 和 text-orientation 的值映射到对应的物理边框属性。
竖排文字布局常用于中文排版或特殊设计场景，此时边框的粗细直接影响阅读体验。如果发现左侧边框异常，需要确认是否同时设置了 border-block-start-width 和 border-block-end-width，或者直接使用 border-block-width 简写属性。MDN 提供的示例显示，在 vertical-lr 模式下设置 border-block-width: 5px 会同时影响左右边框的宽度，确保了布局的一致性。
排查边框宽度设置与默认值冲突
检查代码中是否同时存在 border-block-width 和 border-left-width 等物理属性。如果两者同时定义，浏览器可能会优先使用物理属性，导致竖排文字左侧边框宽度不符合预期。MDN 的 Formal Definition 部分说明，border-block-width 的初始值为 medium，且计算值会根据 writing-mode 映射为绝对长度。如果未明确指定，默认的 medium 宽度可能在竖排布局中显得过粗。
使用浏览器开发者工具检查计算后的样式。在竖排文字模式下，border-block-end-width 的计算值应与 border-block-start-width 保持一致。如果发现计算值异常，可能是 CSS 优先级问题或继承属性导致的。MDN 强调该属性不继承，因此需要确保每个元素都显式设置了宽度值，避免依赖默认的 medium 值。
调整边框宽度并验证显示效果
根据实际需求调整 border-block-width 的值。如果左侧边框过粗，可以尝试减小数值或使用 thin 关键字。MDN 的 Values 部分列出了 thin、medium、thick 等关键字，以及非负长度值。例如，设置 border-block-width: 2px 可以显著减小边框宽度，使竖排文字布局更加协调。确保在 writing-mode 为 vertical-rl 的容器中应用此属性。
验证修改后的效果。在移动端设备或浏览器模拟器中查看竖排文字的边框显示。如果边框宽度一致且符合预期，说明问题已解决。MDN 的示例代码展示了在 vertical-lr 模式下设置 border-block-width: 5px 的效果，验证了属性的正确应用。如果仍有问题，检查是否有其他 CSS 规则覆盖了设置，或确认浏览器兼容性（该属性自 2021 年 4 月起广泛支持）。
检查浏览器兼容性与逻辑属性支持
确认目标浏览器是否支持 logical 属性。MDN 提到该属性在 2021 年 4 月起已广泛可用，但部分旧版浏览器可能不支持。如果遇到显示异常，可以尝试使用物理属性 border-left-width 和 border-right-width 作为备选方案。MDN 的 Browser Compatibility 部分提供了详细的兼容性信息，建议在移动端开发中优先使用 logical 属性以简化代码。
测试不同 writing-mode 值下的表现。border-block-width 的行为会随 writing-mode 变化而改变。例如，在 horizontal-tb 模式下，它对应 border-top-width 和 border-bottom-width。确保在所有可能的布局模式下边框宽度一致。MDN 的示例代码展示了不同 writing-mode 下的效果，验证了属性的多模式支持。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。