移动端非正方形元素圆角变形？检查 border-bottom-right-radius 百分比取值
当移动端非正方形元素的圆角呈现椭圆形状而非预期时，通常是因为百分比取值未正确映射到元素的高度或宽度。
确认百分比取值是否对应正确的盒模型维度
在移动端开发中，使用百分比设置圆角半径时，必须明确其参考的维度。根据规范，百分比取值分别对应盒模型的宽度和高度。第一个值代表水平半径，参考元素宽度；第二个值代表垂直半径，参考元素高度。如果只设置一个值，则水平和垂直半径相等，形成圆形。如果设置两个值，则分别对应水平和垂直方向的半径，形成椭圆。例如，在 200px 宽 100px 高的元素上设置 border-bottom-right-radius: 20% 10%，则水平半径为 40px，垂直半径为 10px。
检查时，首先确认元素的实际宽高是否与预期一致。如果元素宽度或高度为 0，百分比计算将无效。其次，检查是否误将水平半径的百分比应用到了垂直方向，或者反之。这会导致圆角在非正方形元素上变形，表现为高度不足或宽度不足。使用浏览器开发者工具的元素检查功能，查看计算后的具体像素值，可以验证百分比是否正确映射到宽高维度。
验证非正方形元素上的百分比计算结果
对于非正方形元素，百分比圆角半径的计算逻辑与正方形元素不同。在正方形元素上，单个百分比值会生成圆形圆角。但在非正方形元素上，即使只设置一个百分比值，也会生成椭圆圆角。这是因为水平半径和垂直半径都等于该百分比，但参考的维度不同。例如，在 200px 宽 100px 高的元素上设置 border-bottom-right-radius: 40%，水平半径为 80px，垂直半径为 40px，形成椭圆。
验证步骤是创建一个非正方形元素，并设置一个百分比圆角半径。观察圆角的实际形状是否符合预期。如果高度明显不足，可能是垂直半径的百分比设置过低。此时，可以尝试增加垂直方向的百分比值，或者改用固定像素值来精确控制圆角大小。确保百分比值在 0 到 100 之间，负值是无效的。
排查 shorthand 属性对单独属性的影响
border-radius 是一个简写属性，可以同时设置四个角的圆角。如果先设置了 border-bottom-right-radius，随后又使用了 border-radius 简写属性，可能会导致单独设置的值被重置。根据规范，如果简写属性在单独属性之后应用，单独属性的值会被重置为其初始值。这意味着之前的设置将失效。
检查时，确认代码中是否存在 border-radius 简写属性。如果有，尝试将其移除或修改，以确保 border-bottom-right-radius 的值能够生效。或者，直接使用 border-bottom-right-radius 的完整语法，避免使用简写属性。这样可以防止意外的重置，确保百分比计算逻辑按预期工作。
使用具体示例验证计算逻辑
假设有一个移动端按钮，宽度为 150px，高度为 60px。开发者希望右下角圆角较大，但高度不足。检查代码发现，设置了 border-bottom-right-radius: 30%。由于元素不是正方形，水平半径为 45px，垂直半径为 18px。如果开发者期望垂直半径更大，可以修改为 border-bottom-right-radius: 30% 60%，此时垂直半径为 36px，高度将得到改善。
验证方法是复制代码到浏览器中运行，观察圆角的实际效果。如果高度仍然不足，可能是元素的高度被其他 CSS 属性限制。检查 padding、margin 或其他样式是否影响了元素的实际高度。确保百分比计算基于最终的盒模型尺寸，而不是初始尺寸。通过调整百分比值，可以找到合适的圆角大小，解决高度不足的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。