刘海屏导致渐变被裁切的根源是viewport单位误算、安全区未预留及容器未适配env(safe-area-inset-top)；应通过padding-top、min-height修正、background-clip限定绘制区域，并避免在body/html或媒体查询中直接使用env()。
渐变背景在刘海屏上被裁切或错位
刘海屏本身不直接影响 CSS 渐变渲染，但实际问题出在：元素高度被 viewport 单位（如 vh）错误计算、安全区域未预留、或渐变容器未适配 env(safe-area-inset-top) 导致顶部内容被遮挡——此时渐变看起来“缺了一块”或文字压在刘海下。
用 env(safe-area-inset-top) 动态调整渐变容器高度
不能靠 Bootstrap 工具类自动适配安全区，必须手动干预容器的 padding-top 或 min-height。关键不是改渐变本身，而是确保渐变区域有足够可视空间。
- 给渐变容器加
padding-top: env(safe-area-inset-top)，再用background-clip: padding-box确保渐变只画在 padding 区域内（避免从刘海位置开始画） - 若用
min-height: 100vh，必须改成min-height: calc(100vh - env(safe-area-inset-top))，否则刘海区会把容器撑高，导致底部溢出 - 别在
body或html上直接设渐变——它们无法响应env()变量，且会被 iOS Safari 的 viewport 缩放逻辑干扰
渐变方向与安全区叠加时的视觉陷阱
当渐变方向为 135deg（默认）或 to bottom，且容器顶部紧贴视口，刘海区会截断左上角的浅色过渡段，造成“突兀变深”。这不是 bug，是线性渐变在非完整可视区内的自然表现。
- 解决方案不是调角度，而是让渐变起点避开安全区：用
background-position: center top env(safe-area-inset-top)往下偏移起始点 - 更稳妥的做法是限定渐变作用范围——例如只对
.hero-section内部一个子div应用渐变，并控制该子元素的margin-top: env(safe-area-inset-top) - 避免用
to top或0deg方向，iOS Safari 对反向渐变的env()计算支持不稳定，容易出现顶部空白或重复渲染
文字可读性在刘海+渐变组合下的真实风险
刘海屏常伴随深色模式和低对比度渐变段（比如 bg-gradient-light 的右半部分），此时 text-white 在浅色区域可能直接失效，而 WCAG AA 要求对比度 ≥ 4.5:1。
- 别依赖单一文字颜色类；用
text-dark+bg-gradient-light组合比text-white更可靠 - 如果必须用白字，给文字加
text-shadow: 0 1px 2px rgba(0,0,0,0.3)做底层衬垫，而不是调opacity（它会让整个文字变虚） - 检查真实设备：模拟器里的安全区是静态的，但真机（尤其是 iOS 17+）会根据横竖屏动态调整
env(safe-area-inset-top)值，渐变容器必须能响应 resize 事件重绘——纯 CSS 有时不够，需 JS 监听window.visualViewport?.onresize
真正难处理的不是渐变本身，而是安全区变量在不同 iOS 版本中对 background-image 渲染时机的影响：Safari 16.4 之前，env() 在媒体查询内不可用；17.0 后支持但仅限于非动画上下文。这意味着你写的 @media (prefers-color-scheme: dark) { .hero { background-image: ... } } 里若引用 env()，旧版 Safari 会直接忽略整条规则。
