uniapp的nvue中border-radius不生效是怎么回事？

在uniapp的nvue页面上设置border-radius样式不生效，代码示例如下：

<view style="width:100px; height:100px; background-color:red; border-radius:10px;"></view>

在Android和iOS真机上测试发现边框没有圆角效果，请问这是什么原因？需要特殊处理吗？

2 回复

在nvue中，border-radius不生效通常是因为背景色或边框未设置。请检查是否已设置背景色或边框宽度，并确保元素不是图片。


在 nvue 中，border-radius 不生效通常是由于以下原因：

  1. 父元素或自身设置了 overflow: hidden
    nvue 中 border-radius 需要配合 overflow: hidden 才能生效。确保设置了：

    border-radius: 10px;
overflow: hidden;

  2. 层级问题
    如果子元素超出容器，可能导致圆角被覆盖。确保子元素未超出圆角区域。

  3. 平台差异

    • Android：默认支持 border-radius，但需配合 overflow: hidden。
    • iOS：需同时设置 border-radius 和 overflow: hidden，且背景色或边框需明确指定。

  4. 元素类型限制
    nvue 中部分组件（如 <text>）默认不支持圆角，建议用 <view> 包裹并设置样式。

示例代码：

<template>
  <view class="rounded-box">
    <text>圆角内容</text>
  </view>
</template>

<style scoped>
.rounded-box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 20px;
  overflow: hidden; /* 关键属性 */
}
</style>

排查步骤：

  1. 检查是否添加 overflow: hidden。
  2. 确认元素为 <view> 或支持样式的组件。
  3. 在 Android 和 iOS 上分别测试。

若仍无效，尝试为元素添加背景色或边框，确保样式被正确应用。

回到顶部