uni-app nvue 页面 border-radius 失效

uni-app nvue 页面 border-radius 失效

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

操作步骤：

页面引入https://ext.dcloud.net.cn/plugin?id=4531#detail 插件，在nvue 页面设置 .show-view 样式 border-radius 1000px

预期结果：

border-radius 1000px 圆形

实际结果：

border-radius 1000px 方形

bug描述：

<view class="show-view" :style="{'width':cirw+'px','height':cirh+'px'}" style="border-radius: 1000px;">
<CameraPreview ref="CameraPreview" class="hw-push" :style="{'width':sw+'px','height':sh+'px','margin-left':py+'px'}" style="border-radius: 1000px;"></CameraPreview>
<view class="cramBg">
<view class="cir" v-if="showgif">
<image src="../../../static/audio/1.gif"  class="cramimg" mode="scaleToFill"></image>
<image src="../../../static/audio/2.png"  class="icon1" mode="scaleToFill"></image>
</view>
</view>
</view >
.show-view {
flex-direction: row;
border-radius: 1000px;
overflow: hidden;
position: relative;
}
.center_view {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.hw-push {
height: 600px;
width: 1066px;
border-radius: 1000px;
margin-left: -200px;
}

更多关于uni-app nvue 页面 border-radius 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

查看相关问题：https://ask.dcloud.net.cn/question/114175

更多关于uni-app nvue 页面 border-radius 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经确定是overflow:hidden 失效

未复现此问题，请新建空项目测试下是否正常
【咨询问题/bug处理优先级规则】：https://ask.dcloud.net.cn/article/38139

app demo 关于 nvue页面 border-radius 失效

注意不能使用百分比，ios表现如何？

在 uni-app 中使用 nvue 页面时，border-radius 属性在某些情况下可能会失效，这通常是由于 nvue 页面的渲染机制和样式支持与 vue 页面有所不同。以下是一些可能导致 border-radius 失效的原因及解决方法：

1. 父元素样式问题

如果父元素的样式影响到了子元素的 border-radius，可能会导致失效。确保父元素的样式不会影响到子元素的 border-radius。

.parent {
    overflow: hidden; /* 确保父元素不会裁剪子元素的圆角 */
}
.child {
    border-radius: 10px;
}

2. border-radius 和 background-color 或 background-image 一起使用

在 nvue 中，border-radius 通常需要与 background-color 或 background-image 一起使用才能生效。如果只设置 border-radius 而不设置背景色或背景图片，可能会导致圆角效果不显示。

.box {
    border-radius: 10px;
    background-color: #fff; /* 确保设置了背景色 */
}

3. border-radius 和 border 一起使用

在某些情况下，border-radius 可能需要与 border 一起使用才能生效。确保设置了 border 属性。

.box {
    border-radius: 10px;
    border: 1px solid #ccc; /* 确保设置了边框 */
}

4. 使用 overflow: hidden

如果 border-radius 失效，可以尝试在父元素上添加 overflow: hidden，这通常可以强制裁剪子元素的圆角。

.parent {
    overflow: hidden;
}
.child {
    border-radius: 10px;
}

5. 使用 transform 或 position

如果元素使用了 transform 或 position 属性，可能会导致 border-radius 失效。可以尝试调整这些属性的使用方式。

.box {
    border-radius: 10px;
    transform: translate(0, 0); /* 确保 transform 不会影响圆角 */
}

6. 使用 clip-path 作为替代方案

如果 border-radius 仍然无法生效，可以考虑使用 clip-path 作为替代方案来实现圆角效果。

.box {
    clip-path: inset(0 0 0 0 round 10px); /* 使用 clip-path 实现圆角 */
}

7. 检查 nvue 的样式支持

nvue 页面的样式支持与 vue 页面有所不同，某些 CSS 属性在 nvue 中可能不完全支持。建议查阅 uni-app 官方文档，确认 border-radius 在 nvue 中的支持情况。

8. 使用 view 或 div 标签

确保你使用的是 view 或 div 标签，而不是其他可能不支持 border-radius 的标签。

<view class="box"></view>

9. 检查 nvue 的版本

如果你使用的是较旧版本的 uni-app，可能存在一些已知的样式问题。尝试更新到最新版本，看看问题是否得到解决。

10. 使用 scoped 样式

如果你在 nvue 页面中使用了 scoped 样式，确保 border-radius 的样式没有被其他样式覆盖。

<style scoped>
.box {
    border-radius: 10px;
}
</style>
回到顶部