移动端竖排文字右下角圆角显示异常？检查 border-end-end-radius 属性
当移动端页面使用竖排文字时，右下角的圆角可能无法正确渲染，这通常是因为物理属性与逻辑属性映射错误导致的。
确认竖排文字模式下的圆角位置
border-end-end-radius 定义的是元素块尾与内联尾交汇处的圆角。在水平文字模式下，它对应右下角；但在竖排文字模式下，布局方向会发生变化。例如，当 writing-mode 设置为 vertical-rl 时，元素的内联尾变为底部，块尾变为右侧，因此该属性控制的是竖排文字容器的右下角。如果圆角显示在错误的位置，说明浏览器没有正确识别竖排模式下的物理边框映射。
可以通过检查 writing-mode 属性来确认当前文字的排版方向。如果页面使用了竖排布局，必须确保使用的 CSS 属性是逻辑属性而非物理属性。border-end-end-radius 是逻辑属性，它会根据 writing-mode 自动调整对应的物理属性。如果直接使用了 border-bottom-right-radius，在竖排模式下可能无法生效，导致圆角位置与预期不符。
验证属性值的语法与计算逻辑
border-end-end-radius 的值可以是长度或百分比。当使用一个值时，该角会渲染为圆形；使用两个值时，第一个值控制水平轴半径，第二个值控制垂直轴半径，渲染为椭圆。在竖排文字模式下，百分比的计算基准会发生变化。水平轴百分比参考的是元素的宽度，垂直轴百分比参考的是元素的高度。如果设置的值超出了这些尺寸范围，圆角可能无法正确显示。
检查属性值是否为负数。根据规范，负值是无效的，浏览器会忽略负值。如果代码中包含负数，需要将其修正为非负值。此外，该属性适用于所有元素，但在表格元素且边框合并时，浏览器可能不会应用该属性。对于竖排文字容器，应确保其不是表格元素，或者边框未合并，以避免圆角被忽略。
排查浏览器兼容性与继承问题
border-end-end-radius 在 2021 年 9 月起在多个浏览器中广泛可用。如果页面在旧版浏览器上显示异常，可能是兼容性问题。可以通过检查浏览器的版本和特性支持情况来确认。此外，该属性默认不继承，子元素不会自动继承父元素的圆角设置。如果希望子元素具有相同的圆角，需要在子元素上显式设置该属性。
可以通过复现步骤来验证问题。创建一个竖排文字的容器，设置 width 和 height，并应用 border-end-end-radius。在浏览器开发者工具中检查计算后的样式，确认两个值是否为绝对长度或百分比。如果计算值显示为 0，说明属性可能被覆盖或无效。检查是否有其他 CSS 规则（如 !important）影响了该属性的渲染。
对比物理属性与逻辑属性的映射关系
border-end-end-radius 是逻辑属性，它会根据 writing-mode、direction 和 text-orientation 自动映射到物理属性。在水平文字模式下，它映射到 border-bottom-right-radius；在竖排文字模式下，映射关系会改变。如果页面需要支持多种文字方向，使用逻辑属性可以避免手动调整多个物理属性。检查映射关系是否符合预期，可以通过切换 writing-mode 来测试。
如果页面在竖排模式下圆角显示正常，但在水平模式下异常，可能是物理属性设置错误。此时应检查是否混用了 border-end-end-radius 和 border-bottom-right-radius。建议统一使用逻辑属性，以确保在不同文字方向下的一致性。通过对比不同模式下的渲染结果，可以确认属性映射是否正确。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。