移动端竖排文字底部边框过粗？检查 border-block-end-width 属性
当移动端页面使用竖排文字布局时，底部边框可能显示异常粗细，这通常由 border-block-end-width 属性的设置引起。
确认竖排文字模式下的边框映射关系
竖排文字布局通常通过 writing-mode: vertical-rl 或 vertical-lr 实现。在这种模式下，CSS 的逻辑属性会根据书写方向映射到物理边框。border-block-end-width 定义的是逻辑上的“块尾”边框宽度，在竖排文字中，它对应的是元素右侧的物理边框宽度。如果该属性值设置不当，会导致右侧边框过粗或过细，影响视觉平衡。
MDN 文档指出，border-block-end-width 的默认值为 medium，计算后会转换为绝对长度值。在竖排文字场景下，如果开发者直接使用了物理属性如 border-right-width，而没有考虑逻辑属性，可能会导致边框宽度与文字排版不匹配。检查时需确认当前使用的属性是否为 border-block-end-width，而非 border-right-width。
排查属性值设置与计算结果
开发者应检查 CSS 样式表中 border-block-end-width 的具体取值。该属性支持非负长度值（如 5px）或关键词（thin、medium、thick）。如果使用了关键词，浏览器会将其转换为具体的像素值。在竖排文字中，如果边框过粗，可能是因为设置了 thick 关键字，或者使用了过大的长度值（如 10px），导致视觉上显得突兀。
可以通过浏览器开发者工具的样式面板查看计算后的值。MDN 说明该属性的动画类型基于计算值类型，这意味着如果设置了过渡效果，计算值的变化也会影响边框宽度。检查时需确认是否有过渡动画导致宽度在渲染过程中发生抖动，或者初始值设置是否超出了预期的视觉范围。
验证边框宽度与文字内容的适配性
边框宽度设置完成后，需验证其在移动端设备上的实际显示效果。竖排文字模式下，边框通常位于文字的右侧，其宽度应与文字的行高或字号保持协调。如果边框过粗，可能会遮挡文字或占据过多空间，影响阅读体验。建议使用不同设备进行测试，因为不同浏览器的渲染引擎对逻辑属性的映射可能存在细微差异。
如果发现边框过粗，可以尝试将 border-block-end-width 的值调整为更小的长度（如 2px）或使用 medium 关键字。同时，需检查是否有其他属性（如 border-width）同时作用于该元素，导致边框宽度叠加。确保只使用 border-block-end-width 来控制逻辑块尾边框，避免与其他物理属性冲突。
检查相关逻辑属性与继承设置
border-block-end-width 是逻辑属性系列的一部分，相关属性还包括 border-block-start-width、border-inline-start-width 和 border-inline-end-width。这些属性共同定义了元素的其他边框宽度。在竖排文字布局中，如果只修改了 border-block-end-width 而未调整其他相关属性，可能会导致边框宽度不一致，影响整体布局的统一性。
此外，需确认该属性是否被设置为继承。MDN 提到该属性默认不继承，但可以通过 inherit、initial、revert 或 unset 全局值进行修改。如果父元素设置了 border-block-end-width，而子元素未明确覆盖，子元素将使用默认值 medium。检查时需确认子元素是否需要继承父元素的边框宽度设置，或者是否需要独立设置。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。