uni-app nvue页面border-radius属性异常 overflow:hidden;不生效

操作步骤：

创建一个nvue页面，粘贴上面的代码

预期结果：

border-radius：50%;为圆形
overflow：hidden；以圆形裁剪隐藏子元素

实际结果：

border-radius：100%;为圆形
overflow：hidden；以原始尺寸裁剪隐藏子元素

bug描述：

<template>  
    <view style="position: relative;width: 750rpx;height: 1000rpx;background-color: black;">
        <view class="ptzControl">
            <view class="ptz-item ptz-1"></view>
            <view class="ptz-item ptz-2"></view>
            <view class="ptz-item ptz-3"></view>
            <view class="ptz-item ptz-4"></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss" scoped>
.ptzControl {
    width: 284rpx;
    height: 284rpx;
    border-radius: 100%;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 54rpx;
    left: 54rpx;
    overflow: hidden;
    z-index: 2;

    .ptz-item {
        position: absolute;
        width: 284rpx;
        height: 284rpx;
        z-index: 1;
    }
    .ptz-1 {
        background-color: red;
        left: -142rpx;
        top: -142rpx;
    }
    .ptz-2 {
        background-color: blue;
        right: -142rpx;
        top: -142rpx;
    }
    .ptz-3 {
        background-color: yellow;
        left: -142rpx;
        bottom: -142rpx;
    }
    .ptz-4 {
        background-color: pink;
        right: -142rpx;
        bottom: -142rpx;
    }
}
</style>

信息类别	详细信息
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	Windows 11 专业版 22635.2776
HBuilderX类型	正式
HBuilderX版本	3.98
手机系统	Android
手机系统版本	Android 13
手机厂商	小米
手机机型	小米MIX4
页面类型	nvue
Vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app nvue页面border-radius属性异常 overflow:hidden;不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

具体可以参考这个问答：https://ask.dcloud.net.cn/question/114175 应该是weex的问题但是weex已经停止维护好久了所以才导致这个问题一直都有你可以设置子元素的圆角来实现你想要的效果可以试下下面的代码 <template>
<view style="position: relative;width: 750rpx;height: 1000rpx;background-color: black;">
<view class="ptzControl">
<view class="ptz-item ptz-1"></view>
<view class="ptz-item ptz-2"></view>
<view class="ptz-item ptz-3"></view>
<view class="ptz-item ptz-4"></view>
</view>
</view>
</template>

更多关于uni-app nvue页面border-radius属性异常 overflow:hidden;不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

好的，谢谢

vueper 3楼

在 uni-app 的 nvue 页面中，border-radius 和 overflow: hidden 的异常行为通常是由于 nvue 的渲染机制与传统的 H5 或 Vue 页面不同所导致的。nvue 是基于原生渲染的，因此在某些情况下，CSS 属性的表现可能会有所不同。

1. `border-radius` 异常

在 nvue 中，border-radius 在某些情况下可能不会生效，尤其是在嵌套元素或复杂布局中。以下是一些可能的解决方案：

确保父元素和子元素都设置了 border-radius：有时候，子元素的 border-radius 会被父元素的样式覆盖，因此需要确保父元素和子元素都设置了相同的 border-radius。
使用 clip-path 作为替代方案：如果 border-radius 无法生效，可以尝试使用 clip-path 来实现圆角效果。
```
.element {
  clip-path: inset(0 0 0 0 round 10px);
}
```

2. `overflow: hidden` 不生效

在 nvue 中，overflow: hidden 有时可能不会生效，尤其是在处理 border-radius 或 transform 时。以下是一些可能的解决方案：

使用 mask 或 clip-path：如果 overflow: hidden 无法生效，可以尝试使用 mask 或 clip-path 来裁剪内容。
```
.element {
  mask: url(#mask);
}
```
或者：
```
.element {
  clip-path: inset(0 0 0 0);
}
```
确保父元素和子元素的层级关系正确：有时候，子元素的层级关系可能会影响 overflow: hidden 的效果，确保父元素和子元素的层级关系正确。
使用 position: absolute 或 position: fixed：在某些情况下，使用 position: absolute 或 position: fixed 可以解决 overflow: hidden 不生效的问题。

3. 其他注意事项

避免使用复杂的嵌套布局：在 nvue 中，复杂的嵌套布局可能会导致一些 CSS 属性无法正常工作，尽量简化布局结构。
使用 uni-app 提供的原生组件：uni-app 提供了一些原生组件（如 view、image 等），这些组件在 nvue 中的表现通常比自定义组件更稳定。

示例代码

以下是一个简单的示例，展示了如何在 nvue 中使用 border-radius 和 overflow: hidden：

<template>
  <view class="container">
    <view class="box">
      <image src="https://example.com/image.jpg" class="image"></image>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
}
</style>