uni-app nvue页面中 设置border-top-left-radius 会导致4个角都有圆角

uni-app nvue页面中 设置border-top-left-radius 会导致4个角都有圆角

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win7
开发工具 HBuilderX
工具版本 3.2.15
手机系统 iOS
手机版本 iOS 14
手机厂商 苹果
手机型号 iPhone12
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

border-top-left-radius:30rpx;
border-top-right-radius :30rpx;

操作步骤：

border-top-left-radius:30rpx;
border-top-right-radius :30rpx;

预期结果：

只有上方两个角有圆角效果

实际结果：

4个角都有圆角效果

bug描述：

nvue页面中 设置border-top-left-radius 会导致4个角都有圆角

更多关于uni-app nvue页面中 设置border-top-left-radius 会导致4个角都有圆角的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

IOS15，iPhone 6s Plus，未复现问题。

更多关于uni-app nvue页面中 设置border-top-left-radius 会导致4个角都有圆角的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue样式渲染问题。在nvue中，border-radius属性在部分场景下存在兼容性问题，特别是单独设置某个角的圆角时。

问题原因： nvue的样式渲染基于weex，其border-radius实现与标准CSS存在差异。当只设置部分角的圆角时，可能会被错误地应用到所有角。

解决方案：

  1. 明确设置所有角的圆角值：
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
  1. 使用border-radius简写属性：
border-radius: 30rpx 30rpx 0 0;
/* 顺序：左上 右上 右下 左下 */
  1. 对于更复杂的圆角需求，可以使用overflow: hidden配合外层容器：
<view class="outer" style="overflow: hidden;">
  <view class="inner" style="border-radius: 30rpx 30rpx 0 0;"></view>
</view>
回到顶部