要实现清晰半圆，需容器宽高比≥2:1（如width:200px;height:100px），再设border-radius:100px 100px 0 0；用百分比则必须严格2:1，否则塌陷为椭圆弧，且父容器须设overflow:hidden。
border-radius 值怎么配才出半圆，不是直角或溢出
直接写 border-radius: 50% 50% 0 0 很可能得不到清晰半圆——尤其当容器宽高比不对时，弧度会塌陷成钝角，或因高度不够导致圆角被截断。关键不是百分比本身，而是容器尺寸必须支撑圆弧曲率。
正确做法是：让容器宽度 ≥ 高度的两倍（比如 width: 200px; height: 100px;），再设 border-radius: 100px 100px 0 0（即高度值）。这样左上、右上两个角的圆弧才能自然相接，形成平滑上半圆。
- 若用百分比，
border-radius: 50% 50% 0 0要求元素宽高严格为 2:1，否则会拉伸成椭圆弧 - 移动端慎用固定像素，推荐
border-radius: calc(50vw / 2) calc(50vw / 2) 0 0配合width: 100vw; height: 50vw; - 父容器必须有明确
overflow: hidden，否则超出部分仍可见
为什么伪元素方案更可靠
主元素自身画半圆受限于盒模型尺寸，而伪元素（::before 或 ::after）可自由放大、定位、裁剪，适配性更强，尤其适合底部弧形背景这类场景。
典型写法是让伪元素画一个超大正圆（如 width: 200vmax; height: 200vmax;），再用 transform: translateX(-50%) 居中，靠父容器 overflow: hidden 只露出底部一段弧线。
-
vmax是关键——取视口宽高中较大值，横竖屏都不变形 - 不要用
top: 100%或bottom: -Xpx微调位置，容易在不同设备上偏移；改用top+height组合控制露出弧段长度 - 如果需要阴影，直接在伪元素上加
box-shadow，别依赖渐变模拟，后者难对齐且性能略差
左右/上下半圆方向控制的陷阱
方向错乱往往不是 border-radius 写错了，而是没理解四个值的顺序：左上、右上、右下、左下。例如想做右半圆，很多人误写成 border-radius: 0 50px 50px 0，结果得到的是右上+右下圆角的“竖条状”弧，而非完整右半圆。
真正右半圆需满足：高度 ≥ 宽度，且只设右上+右下圆角，值等于高度的一半。例如 width: 50px; height: 100px; border-radius: 0 50px 50px 0。
- 上半圆：
border-radius: 50px 50px 0 0→ 容器height必须为50px - 下半圆：
border-radius: 0 0 50px 50px→ 同样要求height: 50px - 左半圆：
border-radius: 50px 0 0 50px→ 容器width: 50px，height: 100px
响应式半圆布局的兼容性雷区
在 iOS Safari 旧版或 Android WebView 中，border-radius 遇到 transform 或 clip-path 容易失效或锯齿明显。此时伪元素 + overflow: hidden 仍是兼容性最稳的路径。
避免使用 clip-path: inset(50% 0 0 0) 或 clip: rect() 实现半圆——前者在 Safari 15.4 之前不支持动画，后者已被废弃且无法响应式缩放。
- 深色模式适配：把颜色抽成 CSS 变量，如
background: var(--half-circle-bg, #3498db) - 动画需求：优先对伪元素做
transform: scale()，别动border-radius值本身，后者在多数浏览器中无法硬件加速 - 如果必须用 SVG 替代，注意 viewBox 和 preserveAspectRatio 配置，否则缩放时弧线会失真
overflow 设置和宽高比约束——这两个点一漏，半圆就变成“疑似圆角矩形”。先卡死尺寸关系，再选绘制路径，比反复调 border-radius 数值高效得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
