底部半圆显示直角或溢出，是因为border-radius仅修饰矩形容器四角，不自动裁剪内容；需配合足够宽高的容器（如2:1宽高比）或伪元素+overflow:hidden裁剪下半弧，vmax单位保障响应式适配。
border-radius 实现底部半圆时，为什么只看到直角或溢出？
因为 border-radius 本身不生成“独立弧形”，它只是给矩形容器的角加圆角；要得到底部半圆效果，必须让容器「只露出下半部分」。常见错误是直接对一个窄高比正常的盒子设 border-radius: 0 0 50% 50%，结果弧度太小、视觉上像直角，或者因高度不够导致圆角被截断。
关键不是“设多少百分比”，而是：容器宽度要足够支撑圆弧曲率，高度要控制在刚好显示底部一段弧的位置。通常需配合伪元素 + overflow: hidden 或绝对定位偏移来裁剪。
- 若用主元素自身实现，推荐宽高比 ≥ 2:1（例如
width: 200px; height: 100px;），再设border-radius: 0 0 100px 100px - 更稳妥的做法是用
::after伪元素画一个大椭圆，再通过top和height控制只露出底部弧线段 - 移动端需注意视口单位：用
vmax或vw替代固定像素，避免在小屏上撑开横向滚动条
移动端适配底部半圆：伪元素 + border-radius + overflow 的标准写法
这是目前兼容性最好、可控性最强的方案，适用于 iOS Safari 和 Android Chrome（包括旧版 WebView）。
.bottom-arc {
position: relative;
height: 80px; /* 弧形区域高度，即你希望底部“拱起”的厚度 */
overflow: hidden;
}
.bottom-arc::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 200vmax; /* 足够宽，确保弧线平滑，vmax 防止小屏变形 */
height: 200vmax;
background: #2ea7e0;
border-radius: 50%;
transform: translateX(-50%);
}
说明：
-
200vmax是关键——它取视口宽高中的较大值，保证无论横竖屏，椭圆都能完整覆盖底部区域 -
transform: translateX(-50%)水平居中，避免因left: 50%+ 宽度过大导致偏移 - 父容器
overflow: hidden裁掉椭圆上半部分，只留底部弧线 - 若需适配深色模式，把
background换成 CSS 变量如var(--arc-bg, #2ea7e0)
border-radius 值写成 50% 还是具体像素？
取决于你是否需要响应式缩放。写 50% 表示“半径 = 元素宽/高的一半”，但当伪元素宽高不等（比如 width: 200vmax; height: 100vmax），border-radius: 50% 会生成椭圆而非正圆弧，反而更贴合底部自然过渡感。
而写死像素（如 border-radius: 100px）在 iPhone SE 等小屏上会显得弧度过大甚至溢出容器。所以：
- 固定尺寸组件（如 TabBar 半圆按钮）可用像素值，便于精确对齐
- 全屏级底部弧形背景，优先用
%或vmax单位 - 若需椭圆弧（更柔和），可显式写
border-radius: 50%/30%，前值控制水平曲率，后值控制垂直拉伸
为什么 clip-path 不是首选？
clip-path: ellipse(50% 30% at 50% 100%) 看似更语义化，但它在 iOS Safari 15.4 之前不支持 ellipse() 的 at 语法，且部分安卓低端机渲染有锯齿或闪动。更重要的是：clip-path 无法与 background-image 或渐变叠加生效（会被裁掉），而伪元素方案可以自由叠加多层背景、阴影甚至 SVG 图标。
除非你明确需要非对称弧形（比如左高右低的波浪底边），否则用 border-radius + overflow 更稳、更轻、更易调试。
真正容易被忽略的点是：弧形是否要响应内容高度变化。如果底部区域高度由文字行数动态决定，那就不能靠固定 height + overflow: hidden，得改用 clip-path 或 JS 测量后注入变量——这时候，一开始选错方案，后期就很难平滑切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
