移动端竖排文字底部边框样式为何不生效？检查 border-block-end-style 属性
当移动端页面使用竖排文字布局时，底部边框样式可能未按预期显示，这通常是因为使用了物理边框属性而非逻辑属性。
竖排文字底部边框样式不生效的原因
在移动端网页开发中，当使用 writing-mode 设置竖排文字时，浏览器会根据文本方向重新映射边框位置。如果直接使用 border-bottom-style 等物理属性，可能无法正确映射到竖排布局的底部。border-block-end-style 是一个逻辑属性，它根据 writing-mode、direction 和 text-orientation 的值，自动映射到 border-top-style、border-right-style、border-bottom-style 或 border-left-style。这意味着在竖排文字模式下，该属性会自动控制文字右侧或底部的边框样式，确保样式与布局方向一致。
MDN 文档指出，border-block-end-style 的初始值为 none，这意味着如果未显式设置该属性，底部边框将不会显示。此外，该属性适用于所有元素，且不可继承。在竖排文字布局中，如果开发者误用了物理属性或未正确设置逻辑属性，可能导致边框样式不生效。例如，在 writing-mode: vertical-rl 模式下，border-block-end-style 会映射到 border-right-style，从而控制文字右侧的边框样式。因此，检查该属性是否正确设置是解决竖排文字底部边框样式问题的关键。
排查 border-block-end-style 属性的步骤
首先，打开浏览器开发者工具，选中需要检查的竖排文字元素。在样式面板中，查看该元素的 computed styles，确认 border-block-end-style 的值是否正确设置。如果该属性未显示或值为 none，说明样式可能未生效。接下来，检查元素的 writing-mode 属性，确保其设置为 vertical-rl 或 vertical-lr，以触发竖排文字布局。如果 writing-mode 未设置或值错误，border-block-end-style 可能无法正确映射到物理边框属性。
其次，检查是否有其他 CSS 规则覆盖了 border-block-end-style 的设置。例如，如果父元素或更高层级的样式规则设置了 border-style: none，可能会覆盖子元素的设置。此时，可以使用浏览器开发者工具的样式编辑器，临时修改 border-block-end-style 的值，观察页面效果是否变化。如果修改后样式生效，说明原设置确实存在问题。最后，确认 border-block-end-style 的值是否符合预期，例如 dashed、dotted、solid 等，并检查是否有其他逻辑属性（如 border-block-start-style）干扰了边框样式的显示。
验证 border-block-end-style 属性的设置结果
在完成属性检查和修改后，刷新页面并观察竖排文字的底部边框样式是否按预期显示。如果边框样式（如虚线或点线）正确显示在文字的底部或右侧，说明 border-block-end-style 属性设置成功。此时，可以进一步测试不同 writing-mode 值（如 horizontal-tb）下边框样式的变化，验证逻辑属性的正确映射。如果边框样式仍然不显示，可能需要检查其他相关属性，如 border-block-end-width 或 border-color，确保它们也正确设置。
此外，可以使用浏览器开发者工具的样式编辑器，动态调整 border-block-end-style 的值，观察页面效果的实时变化。例如，将值从 dashed 改为 solid，确认边框样式是否立即更新。如果更新成功，说明属性设置正确且浏览器支持该属性。最后，检查浏览器兼容性，MDN 文档指出该属性自 2020 年 1 月起在广泛支持的浏览器中可用，但建议在移动端测试不同设备上的表现，确保样式一致。
border-block-end-style 属性的常见值与注意事项
border-block-end-style 支持多种线型值，包括 none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。这些值与 border-style 属性相同，但通过逻辑属性应用，确保在不同布局方向下的一致性。例如，在 writing-mode: vertical-rl 模式下，border-block-end-style: dashed 会将虚线边框应用到文字的右侧。需要注意的是，该属性不可继承，因此需要在目标元素上显式设置，而不是依赖父元素的样式。
此外，border-block-end-style 的计算值与指定值相同，且动画类型为离散。这意味着在动画过程中，边框样式不会平滑过渡，而是直接切换到目标值。在移动端开发中，建议优先使用逻辑属性而非物理属性，以适应不同的文本方向和布局需求。例如，在处理竖排文字时，使用 border-block-end-style 可以避免手动计算边框位置，提高代码的可维护性。最后，确保在目标浏览器中测试该属性，因为不同浏览器对逻辑属性的支持可能存在差异。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。