移动端圆角矩形高度不足？检查 border-bottom-left-radius 百分比计算逻辑
当移动端页面圆角矩形的高度不足时，应检查 border-bottom-left-radius 属性中百分比值的计算逻辑，确认其是否正确参考了元素的高度。
确认百分比值的参考维度
border-bottom-left-radius 属性接受长度或百分比作为半径值。当使用百分比时，水平轴的百分比参考元素的宽度，垂直轴的百分比参考元素的高度。如果只提供一个值，该值同时作为水平半径和垂直半径。如果提供两个值，第一个值控制水平半径，第二个值控制垂直半径。这意味着在非正方形元素上，单值百分比会根据元素的宽高比产生不同的圆角效果。
在移动端开发中，开发者常使用百分比来设置圆角以适应不同屏幕尺寸。然而，如果元素的高度小于宽度，单值百分比会导致圆角在垂直方向上被压缩，从而在视觉上造成高度不足的错觉。这种计算逻辑是 CSS 规范定义的，旨在保持圆角形状与元素形状的一致性。
排查单值与双值设置差异
检查 CSS 代码中 border-bottom-left-radius 的具体写法。如果代码中只写了一个值，例如 border-bottom-left-radius: 20%，则该值同时应用于水平和垂直方向。如果代码中写了两个值，例如 border-bottom-left-radius: 20% 10%，则第一个值控制水平半径，第二个值控制垂直半径。双值设置允许开发者分别控制水平和垂直方向的圆角大小。
在移动端调试时，可以通过开发者工具查看元素的 computed style。如果发现垂直方向的圆角半径小于水平方向的圆角半径，且代码中使用了单值百分比，则说明这是由元素宽高比决定的正常现象。如果代码中使用了双值百分比，则应检查两个值是否设置合理，避免垂直方向半径过小导致高度不足。
验证背景图与圆角的裁剪关系
背景图或背景色会被裁剪到圆角边框内。背景裁剪的位置由 background-clip 属性定义。如果 background-clip 设置为 border-box，背景会延伸到圆角边缘；如果设置为 content-box，背景只会填充内容区域，不会延伸到圆角边缘。这种裁剪逻辑确保了背景在圆角边缘的平滑过渡。
在移动端页面中，如果背景图被裁剪导致视觉上高度不足，可能是由于 background-clip 属性设置不当。检查 background-clip 的值是否为 border-box 或 content-box。如果 background-clip 设置为 content-box，背景图不会延伸到圆角边缘，可能会在圆角处出现空白区域。
检查简写属性的重置影响
border-radius 是 border-bottom-left-radius 的简写属性。如果在 border-radius 简写属性之后应用 border-bottom-left-radius，border-bottom-left-radius 的值会被重置为初始值 0。这意味着简写属性会覆盖之前单独设置的 border-bottom-left-radius 值。
在移动端开发中，如果发现圆角失效或高度不足，应检查 CSS 代码中 border-radius 简写属性的位置。确保 border-bottom-left-radius 的设置在 border-radius 简写属性之前，或者直接使用 border-radius 简写属性来设置所有圆角。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。