竖排文字右下角圆角不显示？检查 border-end-end-radius 属性
竖排文字布局中右下角圆角未生效时，应检查 border-end-end-radius 属性的映射逻辑与书写模式设置。
确认书写模式与方向设置
竖排文字布局中，元素的圆角效果取决于 writing-mode 和 direction 属性。border-end-end-radius 定义的是元素块尾与内联尾交汇处的圆角，在 vertical-rl 书写模式下，该属性对应物理属性 border-bottom-right-radius。如果未设置正确的书写模式，浏览器可能无法正确映射圆角位置，导致右下角圆角显示异常。检查 CSS 中是否明确指定了 writing-mode: vertical-rl，并确认 direction 属性是否为 ltr 或 rtl，以确保圆角逻辑与视觉位置一致。
在调试过程中，可以通过浏览器开发者工具查看计算后的样式。如果 border-end-end-radius 未生效，可能是因为父容器或自身未应用该属性，或者被其他简写属性覆盖。确保在 CSS 中直接针对目标元素设置 border-end-end-radius，而不是依赖继承或简写属性。同时，检查是否有其他样式规则通过 !important 或更高优先级覆盖了该属性，导致圆角设置被忽略。
验证属性值与单位是否合法
border-end-end-radius 的属性值必须是有效的长度或百分比，且不能为负数。如果设置的值为无效单位或负值，浏览器将忽略该属性，导致圆角不显示。例如，border-end-end-radius: -10px 是无效的，浏览器会直接忽略该设置。确保使用 px、em、rem 或百分比等合法单位，并且数值在 0 到正无穷之间。对于两个值的语法，第一个值控制水平半径，第二个值控制垂直半径，分别对应元素的宽度和高度。
在移动端调试时，可以使用开发者工具的元素检查器，查看 border-end-end-radius 的计算值。如果显示为 auto 或无效值，说明属性设置存在问题。可以尝试将属性值改为简单的像素值，如 border-end-end-radius: 10px，观察圆角是否正常显示。如果使用百分比，确保百分比相对于元素的宽度和高度是合理的，避免因百分比计算错误导致圆角异常。
排查简写属性与继承冲突
border-end-end-radius 是一个逻辑属性，它依赖于元素的 writing-mode 和 direction。如果使用了 border-radius 等简写属性，可能会覆盖或冲突。简写属性 border-radius 会同时设置四个角的圆角，而 border-end-end-radius 只设置特定角的圆角。如果简写属性设置不当，可能会导致特定角的圆角被覆盖或显示异常。确保在 CSS 中明确使用 border-end-end-radius，而不是依赖简写属性。
此外，border-end-end-radius 是不可继承的属性。如果父元素设置了该属性，子元素默认不会继承。如果希望子元素具有相同的圆角效果，需要在子元素中显式设置 border-end-end-radius。检查 CSS 中是否有继承规则或默认样式影响子元素的圆角显示。确保子元素直接应用了 border-end-end-radius 属性，而不是依赖父元素的样式。
检查浏览器兼容性与渲染模式
border-end-end-radius 是 CSS 逻辑属性的一部分，自 2021 年 9 月起在主流浏览器中广泛可用。如果浏览器版本较旧或未完全支持该属性，可能会导致圆角显示异常。确保目标浏览器支持 CSS 逻辑属性和值模块级别 1。在移动端，不同浏览器对 CSS 属性的支持可能存在差异，建议在目标设备上进行实际测试。
在调试时，可以尝试使用浏览器的前缀版本，如 -webkit-border-end-end-radius，以兼容旧版浏览器。如果前缀版本有效，说明浏览器支持该属性但未完全实现标准版本。同时，检查浏览器的渲染模式是否为标准模式，避免因怪异模式导致样式计算错误。确保 HTML 文档声明了正确的 DOCTYPE，以启用标准渲染模式。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。