移动端竖排文字圆角显示异常？检查 border-end-start-radius 属性
在竖排文字布局中，使用 border-end-start-radius 属性可以确保圆角位置随文字方向自动调整。
检查竖排文字圆角位置是否跟随方向变化
当页面采用竖排文字模式时，元素的圆角位置不应固定在物理的左下角，而应随文字方向自动变化。border-end-start-radius 属性定义了一个逻辑边框半径，它会根据元素的 writing-mode、direction 和 text-orientation 自动映射到对应的物理属性。例如，在 horizontal-tb 写入模式且方向为 ltr 时，它对应 border-bottom-left-radius。但在竖排模式下，该属性会自动映射到 border-top-right-radius，确保圆角始终位于文字的起始侧。
如果圆角位置在竖排文字中显示错误，可能是使用了物理属性而非逻辑属性。检查代码中是否使用了 border-bottom-left-radius 等固定方位的属性，这会导致圆角在文字方向改变时位置不变。应改用 border-end-start-radius，这样无论文字是水平还是竖排，圆角都会正确地位于 block-end 和 inline-start 的交界处。
验证属性在不同文字方向下的映射结果
为了验证 border-end-start-radius 是否正确工作，可以在不同文字方向下测试圆角位置。在水平-tb 模式下，该属性应映射为 border-bottom-left-radius，即左下角圆角。在 vertical-lr 或 vertical-rl 模式下，它应映射为 border-top-right-radius，即右上角圆角。这种映射关系确保了圆角始终位于文字的起始侧，无论文字如何排列。
可以通过修改 writing-mode 属性来测试映射结果。例如，将 writing-mode 设置为 vertical-rl，然后观察圆角是否出现在右上角。如果圆角位置没有随文字方向改变，说明属性映射可能未生效。此时应检查浏览器兼容性，因为该属性在 2021 年 9 月起已在多种浏览器中广泛可用。
确认属性值是否支持百分比计算
border-end-start-radius 属性的值可以是长度或百分比。百分比计算时，水平轴的百分比参考元素的宽度，垂直轴的百分比参考元素的高度。这意味着可以使用百分比来定义圆角大小，从而适应不同尺寸的容器。例如，设置 border-end-start-radius: 50% 50% 会在水平和垂直方向上创建一个完美的圆形圆角。
如果圆角显示异常，可能是百分比计算错误。检查属性值是否使用了两个值，分别对应水平和垂直方向的半径。如果只提供一个值，圆角将是一个圆形；如果提供两个值，则是一个椭圆。确保百分比值在 0 到 100 之间，负值是无效的。
排查属性继承与全局值的影响
border-end-start-radius 属性默认不继承，但可以通过全局值如 inherit、initial、revert 或 unset 来控制其行为。如果父元素设置了该属性，子元素可以通过 inherit 继承该值。如果需要重置为默认值，可以使用 initial 或 unset。检查代码中是否意外使用了这些全局值，导致圆角显示异常。
此外，该属性适用于所有元素，但表格元素在 border-collapse 为 collapse 时可能不应用。如果圆角在表格中不显示，检查表格的 border-collapse 属性设置。确保属性值是有效的长度或百分比，避免使用无效值导致渲染问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。