clip-path: path() 是移动端导航栏实现凹凸造型的最可行方案，需归一化坐标、双写前缀、包裹容器避免热区裁剪，且须规避 mask-image 的 ios 渲染缺陷。
clip-path: path() 是目前最可行的方案
移动端导航栏要做凹凸造型（比如中间下陷容纳 FAB 按钮），clip-path: path() 是当前唯一能兼顾精度、响应性和浏览器支持的方案。iOS Safari 16.4+ 和 Android Chrome 100+ 已稳定支持，旧版本会自动回退为矩形，不报错也不崩溃。
- 路径必须用 SVG 贝塞尔语法写，例如
clip-path: path("M0,0 L100,0 C100,20 80,40 60,40 C40,40 20,20 20,0 Z")，不能直接复制设计稿里的 px 坐标 - 所有坐标值必须归一化到 0–100 范围（或 0–1），再配合
viewBox="0 0 100 100"使用，否则横竖屏切换时路径错位 - 不要把
clip-path直接加在BottomNavigation根元素上——子元素（图标、文字）的点击热区会被裁掉；应包裹一层<div class="tabbar-clipper">，只对容器裁剪 <li>务必双写前缀：<code>clip-path: path("..."); -webkit-clip-path: path("...")，Safari 漏掉-webkit-就失效 -
mask-image的 SVG<mask></mask>不受transform或scale()影响，但实际渲染会随 viewport 缩放偏移，调试时加background: red就能看见 mask 区域漂移 - 微信内置浏览器、部分银行 App 的 WebView 内核更老，
mask-image可能完全不解析，降级行为不可控 - 没有可靠 fallback 方式——
@supports (mask-image: url())在 iOS 上返回 true，但实际不生效，无法安全判断 - 唯一稳解：全用百分比或视口单位重写路径，例如把
M0,0 L375,0 L375,50 L300,80 Z改成M0%,0% L100%,0% L100%,13.3% L79.9%,21.3% Z（300/375≈79.9%，80/375≈21.3%） - 禁止混用单位：
path("M0,0 L100px,0 L100%,50 Z")在 Safari 中会静默降级为矩形 - 如果必须动态适配，用 JS 获取容器
getBoundingClientRect()后实时注入像素值到clip-path，但要注意避免 layout thrashing - 简单场景可放弃
path()，改用clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0% 90%)模拟波浪底边，兼容性拉满 - 给导航栏容器加
isolation: isolate，强制创建独立层叠上下文，让裁剪作用域包含阴影和边框 - 更推荐方案：用
filter: drop-shadow()替代box-shadow，它天然受clip-path约束，且性能更好 - 如果必须保留
border，把它画进path()里——即用clip-path同时定义外形和边框轮廓，而不是靠 CSSborder属性 - 测试是否生效：打开 DevTools → Elements 面板 → 找到对应元素 → 查看
clip-path是否被划掉（strikethrough）或标为 invalid
为什么 mask-image 在 iOS 上基本不能用
即便你用内联 SVG + mask-image: url(#myMask)，iOS Safari 仍大概率出现三类硬伤：渲染抖动（滚动时边缘闪烁）、缩放失真（横屏后 mask 错位）、点击区域错位（手指点在凹口却触发了旁边按钮）。这些不是配置问题，是 WebKit 渲染管线底层缺陷，截至 2026 年 6 月仍未修复。
移动端尺寸变化导致路径错位的应对方式
你按 375px 宽度设计的 path，在 iPhone SE（320px）上缩放后，路径坐标仍按原始像素计算，凹口可能跑到屏幕外。这不是 bug，是 CSS 坐标系与设备像素比不匹配的必然结果。
clip-path 裁不掉阴影和边框？这是常态
clip-path 默认只裁剪元素内容区域，box-shadow 和 border 属于绘制溢出，Safari 尤其容易漏裁。这不是你写错了，是规范实现差异。
