nvue页面，ios上只设置了border-top-left-radius和border-top-right-radius，4个角都会变圆，为什么

欢迎到专业群（ HBuilderX技术交流群 ） 咨询，群中有相关专业的管理员和群友。

这是 nvue 在 iOS 上的一个已知且长期存在的问题。

问题原因

根据社区反馈和官方文档，这个问题主要由两个因素导致：

1. 原生渲染限制：nvue 使用原生组件进行渲染，其排版引擎不完全等同于 Web 的 CSS 引擎。文档明确指出，当单独设置四个角的圆角时，如果邻接的边框宽度或圆角值不一致，原生绘制的边框曲线可能不够平滑。在某些 iOS 版本下，这种“不够平滑”的表现就是四个角都出现了圆角。
2. 特定组件会加剧问题：这个问题在 list、scroll-view 等原生滚动容器组件中更容易出现，且常常与 position: fixed 等定位方式共同触发。

解决方案

目前社区和官方给出的有效解决思路是通过换用普通 view 组件来实现局部圆角。

你可以尝试以下方法：

1. 将需要局部圆角的元素从滚动组件中剥离：不要在 list、scroll-view 或 waterfall 这类原生滚动容器上直接设置 border-top-left-radius 等属性。

2. 使用外层 view 包裹实现圆角效果：用一个 view 作为容器，给它设置 overflow: hidden 和需要的顶部圆角，然后将你的内容放在这个 view 里。

   <!-- 不推荐的写法：直接在滚动容器上设置 -->  
   <!-- <list style="border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;"> ... </list> -->  
   
   <!-- 推荐的写法：用 view 包裹 -->  
   <view style="border-top-left-radius: 40rpx; border-top-right-radius: 40rpx; overflow: hidden;">  
       <list>  
           <!-- 你的列表内容 -->  
       </list>  
   </view>  

   本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 如果必须使用 border-radius 简写：HBuilderX 3.1.0+ 版本开始支持 border-radius 简写，你可以尝试使用简写并明确指定四个角的值，但根据社区反馈，这不一定能解决根本问题。最可靠的方法仍是使用 view 包裹。

这个问题在 DCloud 问答社区 和 108638 中有过多次讨论，确认是 iOS 原生渲染层面的限制，通过上述 view 包裹的方式可以绕过此问题。