原生导航栏右侧按钮无法设圆角，因titleNView.buttons不支持borderRadius等CSS样式；需改用navigationStyle: "custom"自定义导航栏，通过CSS设置border-radius，并用uni.getMenuButtonBoundingClientRect()动态对齐胶囊按钮。
uni-app 原生导航栏右侧按钮无法设圆角
原生导航栏的 titleNView.buttons 不支持 borderRadius、border 等 CSS 样式属性——它渲染的是系统级原生控件，不是 DOM 元素，所有样式只能通过 color、fontSize、text、fontSrc 等有限字段控制。
想实现“圆角按钮效果”，必须放弃 titleNView，改用自定义导航栏
只有在 navigationStyle: "custom" 模式下，你才能完全掌控右侧区域的渲染逻辑，包括加 border-radius、背景色、阴影、图标+文字组合等。
- 在
pages.json对应页面的style中设置："navigationStyle": "custom" - 在页面
.vue文件中，用<view class="nav-right"><button class="round-btn">编辑</button></view>手动布局右侧内容 - 用
uni.getMenuButtonBoundingClientRect()获取胶囊按钮位置，动态对齐（尤其小程序端），避免遮挡或错位 - H5 和 App 端需额外处理：H5 没有胶囊按钮，App 端若未禁用原生导航栏，自定义 DOM 会和原生层重叠甚至不可点
uView 的 <u-navbar> 能否直接设圆角？
可以，但仅限于自定义导航栏场景。它的 right-icon 或插槽内容是普通 Vue 模板，所以能加任意 CSS：
<u-navbar title="首页"> <view slot="right" class="round-btn" @click="onRightClick">发布</view> </u-navbar>
对应 CSS：
.round-btn {
padding: 0 16rpx;
height: 56rpx;
line-height: 56rpx;
border-radius: 28rpx;
background-color: #ff5555;
color: #fff;
font-size: 24rpx;
margin-right: 20rpx;
}
- 注意：该按钮点击区域在 H5/小程序/App 上都正常，但高度、内边距、圆角值需按平台微调（比如 iOS 状态栏下移导致顶部挤压）
- 不要依赖
u-navbar的right-text属性来实现圆角——它只渲染纯文本，不生成可样式化容器
最容易被忽略的一点：胶囊按钮的定位兼容性
微信小程序右上角那个“药丸”是系统原生组件，你的自定义圆角按钮必须避开它，否则在 iPhone X+ 或部分安卓全面屏机型上会被裁切或错位。务必用 uni.getMenuButtonBoundingClientRect() 拿到它的 top、right、height，再反推你的按钮 position: absolute 的 top 和 right 值——硬写固定 rpx 在真机上大概率失效。
