微信小程序原生导航栏不支持弧形，custom模式下仅能通过css对自定义容器内部区域实现视觉弧形；需结合safeareainsets、动态padding、渐变阴影及rpx圆角适配多端。
uni-app 微信小程序导航栏无法直接“做成弧形”
微信小程序的原生导航栏不支持圆角、弧形或任何非矩形样式；navigationStyle: "custom" 后你获得的是完全自定义的 DOM 区域，但它的“弧形”效果只能靠 CSS 实现——而真正能生效的，仅限于你自定义的 <view></view> 容器本身，不是系统导航栏。
为什么直接设 border-radius 会失效或被遮挡
常见错误是给自定义导航栏外层加 border-radius: 24px，但实际运行时发现：顶部圆角被状态栏裁切、左右圆角被屏幕边缘截断、胶囊按钮（右上角药丸）悬空在圆角区域外。
- 状态栏（
statusBarHeight）和胶囊按钮（top/bottom）的位置是固定像素坐标，它们不会随你的border-radius自动偏移 - 微信小程序容器的渲染边界默认紧贴屏幕，
overflow: hidden对顶部圆角无效，反而可能让内容溢出不可见 - 真机测试中，iPhone 刘海屏 + iOS 系统对
clip-path或mask支持极差，border-radius在父容器未预留安全间距时直接被裁掉
可行的“视觉弧形”实现路径
所谓“弧形导航栏”，本质是营造顶部区域的柔和过渡感。推荐用以下组合方式，兼顾兼容性与真机表现：
- 用
padding-top: statusBarHeight + 'px'抬升内容区，把状态栏空出来作为“弧形起点” - 导航栏容器设置
height: customBarHeight + 'px'（由statusBarHeight+ 胶囊高度 + 上下间隙推算），确保胶囊按钮刚好落在容器内 - 只对导航栏**内部内容区域**（如标题背景块、搜索框容器）应用
border-radius: 16px，避开顶部状态栏和胶囊按钮所在行 - 使用渐变色 + 阴影模拟立体弧面感：
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)+box-shadow: 0 4px 12px rgba(0,0,0,0.08) - 若需顶部边缘真实圆角，必须配合
safeAreaInsets.top动态计算，并用clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px))——但仅限 iOS 15.4+ & Android Chrome 100+，微信基础库 2.28.0+ 才部分支持，低版本会回退为直角
容易被忽略的适配细节
弧形效果在不同设备上差异极大：iPhone 15 Pro 的 safeAreaInsets.top 是 59px，华为 Mate 60 是 48px，红米 Note 13 只有 32px。单纯写死 border-radius: 24px 在小屏上会把标题文字切掉一半。
- 所有圆角值建议用
rpx单位，且不超过statusBarHeight * 0.8（例如 statusBarHeight=46px → 最大用 36rpx） - 胶囊按钮右侧留白必须 ≥
menuButtonInfo.right - menuButtonInfo.width，否则圆角背景会覆盖胶囊图标 - H5 端没有状态栏和胶囊，
border-radius可以直接用，但要通过#ifdef MP-WEIXIN条件编译隔离样式
