用::after伪元素配合border-radius: 0 0 50% 50%可实现轻量、高兼容的顶部弧形，原理是创建超宽椭圆并裁剪只留顶部弧段，需父容器设position: relative和overflow: hidden，伪元素设z-index: -1确保层级正确。
直接用 ::after 伪元素 + border-radius 是最轻量、兼容性最好、也最容易调试的方案，适合大多数小程序和 H5 页面。它不依赖 Canvas 或自定义 View，也不需要额外 JS 控制，但要注意弧度表现有物理限制。
为什么 border-radius 能画出弧形顶部？
关键在于让一个“超宽圆角矩形”的下半部分被裁掉，只露出顶部一段平滑弧线。本质是利用圆的几何特性：当一个元素的 width 远大于 height，且 border-radius 设为 0 0 50% 50% 时，底部两个角会形成对称的圆弧过渡。
-
border-radius: 0 0 50% 50%表示仅设置左下、右下为 50% 圆角，上边保持直角 - 但若容器本身高度很小（比如
100rpx），而宽度拉到140%，再配合负left偏移，就能把圆弧“推”到顶部可视区 - 实际渲染的是一个椭圆切片，不是数学精确的贝塞尔弧，但在视觉上足够自然
::after 伪元素必须加 z-index: -1 吗？
是的，否则它会盖住真实内容。但更关键的是父容器要设 position: relative 和 overflow: hidden：
-
position: relative是为了让::after的absolute定位有参照系 -
overflow: hidden防止弧形超出容器后在某些安卓 WebView 中出现意外溢出或锯齿 -
z-index: -1确保伪元素在内容层之下；如果父容器已有其他z-index元素，需统一管理层级，避免 iOS 上的渲染错乱
常见翻车点：弧线不平滑 / 在部分安卓机上变直角
这通常不是代码写错了，而是渲染引擎对大比例 border-radius 的处理差异导致的：
立即学习“前端免费学习笔记（深入）”；
- 某些低版本安卓 WebView（如 Android 6–7 内置）不支持百分比
border-radius超过height的 1.2 倍，此时建议 fallback 到固定px值，例如border-radius: 0 0 80px 80px - 使用
rpx单位时，若父容器宽度未满屏（比如加了padding），140%就可能算不准，应改用vw或明确写死width: 750rpx - 开启硬件加速（
transform: translateZ(0)）有时反而会让弧线崩成多边形，尤其在旧版三星设备上，建议禁用
要不要用 clip-path 替代？
可以，但现阶段不推荐用于顶部背景主方案：
-
clip-path: path('M0,0 Q375,100 750,0 Z')能画出真正可控的贝塞尔弧，但 Android 5–9 大量机型不支持path()语法 -
clip-path: ellipse()或inset()兼容性稍好，但无法实现非对称或动态弧高 - 真要用
clip-path，务必搭配@supports (clip-path: path())检测，并给老设备回退到border-radius方案
真正难的不是画出那条弧，而是让不同屏幕密度、不同 WebView 内核、不同系统版本下的弧高看起来一致——这需要你把 height 和 border-radius 绑定到同一套设计变量里，而不是凭感觉调数值。
