移动端正方形元素使用单一百分比圆角为何显示为椭圆
正方形元素使用单一百分比圆角时，浏览器会根据元素的实际宽高比计算椭圆弧度，导致显示结果与预期不符。
单一百分比圆角在正方形元素上的计算逻辑
当正方形元素使用单一百分比圆角值时，CSS 规范规定该值代表圆的半径。然而，由于正方形元素的长宽相等，浏览器在渲染时会将这个半径同时应用于水平和垂直两个轴。这意味着圆角实际上被拉伸成了一个椭圆，而非完美的圆形。例如，设置 40% 的圆角，在 100x100 的正方形中，水平半径为 40px，垂直半径也为 40px，视觉上呈现为正圆。但在 200x100 的矩形中，水平半径变为 80px，垂直半径仍为 40px，视觉上则呈现为明显的椭圆。
这种计算方式源于 CSS 规范中对 border-radius 属性的定义。规范指出，单一值既可以是长度也可以是百分比。当使用百分比时，水平方向的百分比参考元素的宽度，垂直方向的百分比参考元素的高度。对于正方形元素，宽度等于高度，因此单一百分比在两个方向上产生相同的半径值。但在非正方形元素上，单一百分比会导致水平半径和垂直半径不一致，从而形成椭圆弧度。这是浏览器基于几何计算的标准行为，并非渲染错误。
如何复现与验证单一百分比圆角的显示效果
要验证这一现象，可以在移动端网页开发工具中创建两个正方形元素。第一个元素宽高均为 100px，设置单一百分比圆角，例如 40%。第二个元素宽高分别为 200px 和 100px，同样设置 40% 的单一圆角。通过对比这两个元素的渲染结果，可以直观地看到正方形元素呈现为圆形，而非正方形元素呈现为椭圆。这种对比验证了单一百分比圆角在不同宽高比元素上的不同表现。
验证时需注意检查元素的宽高属性是否严格相等。如果元素宽高不一致，即使设置了单一百分比圆角，也会显示为椭圆。此外，应确保没有其他 CSS 属性干扰渲染，例如 border 或 background-clip 属性。通过简单的 CSS 代码测试，可以快速确认单一百分比圆角在正方形元素上的实际显示效果。
解决单一百分比圆角显示为椭圆的调整方法
如果希望正方形元素显示为圆形，可以采用两种方法。第一种是使用两个相同的百分比值，例如 40% 40%。这明确指定了水平和垂直方向的半径相同，确保渲染为圆形。第二种是使用绝对长度值，例如 40px。由于正方形元素宽高相等，单一长度值也能保证水平和垂直半径一致，从而呈现圆形。这两种方法都能避免单一百分比在非正方形元素上导致的椭圆显示问题。
对于需要保持元素宽高比一致的场景，使用两个相同的百分比值或长度值是最直接的解决方案。例如，设置 border-bottom-right-radius: 40% 40%; 可以确保无论元素尺寸如何变化，圆角始终保持为圆形。这种方法在移动端响应式设计中尤为重要，能够保证视觉一致性。
单一百分比圆角在移动端布局中的注意事项
在移动端布局中，单一百分比圆角的使用需要特别注意元素的尺寸变化。由于移动设备屏幕尺寸多样，正方形元素在不同设备上可能呈现为矩形。如果使用单一百分比圆角，可能会导致圆角在不同设备上显示为椭圆，影响视觉美观。因此，建议在移动端设计中优先使用两个相同的百分比值或长度值，以确保圆角的一致性。
此外，单一百分比圆角在移动端浏览器中的兼容性良好，自 2015 年起已广泛支持。但在使用时，应避免将单一百分比圆角应用于非正方形元素，以免产生意外的椭圆效果。通过合理设置圆角属性，可以优化移动端网页的视觉体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。