移动端网页单一百分比圆角在正方形元素上为何显示为正圆
正方形元素应用单一百分比圆角时，浏览器会根据元素宽高比计算半径，从而生成正圆弧线。
正方形元素与单一百分比值的几何映射
CSS 规范中，单一百分比值在正方形元素上会生成正圆弧线。当元素宽高相等时，单一百分比分别对应元素的宽度和高度进行计算，由于宽高比一致，计算出的水平半径与垂直半径相同，因此绘制出正圆弧线。例如，一个宽度为 100px、高度为 100px 的正方形元素，设置 border-bottom-right-radius: 40%，浏览器会计算 40% 对应的宽度为 40px，高度也为 40px，从而绘制出标准的正圆弧线。
这种几何映射是 CSS 标准定义的默认行为，旨在保持圆角与元素尺寸的相对比例关系。单一长度值（如 px 或 em）在正方形元素上同样会生成正圆弧线，因为水平半径和垂直半径均为该长度值。规范指出，百分比值的水平轴参考元素的宽度，垂直轴参考元素的高度，但在正方形元素中，这两者数值相等，因此结果为正圆。
复现检查步骤与结果判断
在移动端网页开发中，可以通过以下步骤复现并验证该现象。首先，在 HTML 中创建一个正方形的 div 元素，设置明确的宽度和高度，例如 width: 100px; height: 100px;。其次，在 CSS 中为该元素应用单一百分比圆角，例如 border-bottom-right-radius: 40%;。最后，在浏览器开发者工具中检查该元素的渲染结果。
判断结果的方法是观察圆角的形状。如果圆角呈现为标准的正圆弧线，即底部和右侧的切线平行且弧度均匀，则验证了单一百分比在正方形元素上生成正圆的行为。若圆角呈现为椭圆弧线，则说明元素可能被强制设置为非正方形，或者浏览器未正确应用百分比计算。
实现圆角为椭圆的替代方案
如果希望正方形元素显示椭圆弧线，需要调整属性设置。根据规范，单一长度值在正方形元素上同样会生成正圆。因此，必须使用两个不同的值来分别控制水平和垂直方向的半径。通过设置 border-bottom-right-radius: 40px 20px;，可以明确指定水平半径为 40px，垂直半径为 20px，从而绘制出椭圆弧线。
另一种方法是使用 calc() 函数动态计算半径。例如，设置 border-bottom-right-radius: calc(40% * min(width, height));，可以确保圆角半径始终基于元素的最小边长进行计算。这种方法适用于响应式布局，能够保持圆角形状的一致性。
兼容性与注意事项
border-bottom-right-radius 属性在 2015 年 7 月起在主流浏览器中广泛可用，兼容性良好。需要注意的是，该属性适用于所有元素，但在表格元素（特别是 border-collapse 为 collapse 时）上的行为可能未定义。此外，背景色和背景图会被圆角裁剪，裁剪位置由 background-clip 属性决定。
在移动端开发中，建议使用明确的长度值或 calc() 函数来避免因百分比计算导致的意外椭圆形状。同时，应测试不同屏幕尺寸下的渲染效果，确保圆角在不同设备上保持一致。MDN 文档提供了详细的语法和示例，可作为参考依据。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。