uni-app nvue页面圆形div阴影被切

uni-app nvue页面圆形div阴影被切

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10 专业版
HBuilderX类型 正式
HBuilderX版本号 3.2.14
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 mate30
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

width:140px;
height:140px;
border-radius:70%;
background-color: #4da2ff;
box-shadow: 8px 8px 10px rgba(103, 103, 103, 1.0);

操作步骤：

  • 打包安装后出现问题

预期结果：

  • 阴影正常显示

实际结果：

  • 阴影被自身的宽高截断

bug描述：

在nvue文件里写了一个圆形添加了一个阴影，真机测试正常，打包后阴影被部分遮挡


更多关于uni-app nvue页面圆形div阴影被切的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

不写成圆形，真机测试正常，打包后直接连阴影都不显示了

更多关于uni-app nvue页面圆形div阴影被切的实战教程也可以访问 https://www.itying.com/category-93-b0.html


详见文档：https://uniapp.dcloud.io/nvue-css?id=android-box-shadow

安卓下 nvue 的 view 默认overflow:hidden 所以要显示完全父容器空间得足够
如果没有配置隐私政策，则打包后，安卓阴影能够正常显示 // 这个是历史bug，官方一直没改
我自己项目中阴影都是固定尺寸的image，内部使用absolute定位，使用的很少，长列表安卓性能很差
安卓下可以用 elevation 但是很鸡肋，和h5还有ios效果差很多

关联问题：https://ask.dcloud.net.cn/question/126044

如果你这个页面没有特殊的性能或者其他要求，用 .vue 把，用 webview 渲染没毛病

谢谢，我之前打包了十几次都没出问题，这次打包出问题了，我还是换.vue文件

在 nvue 中，由于渲染机制差异，box-shadow 在部分 Android 设备上可能出现被裁剪的问题，尤其是当元素设置了 border-radius 时。这是因为 nvue 的渲染层对阴影的绘制区域计算可能存在限制。

解决方案：

  1. 使用 elevation 属性替代（推荐）
    对于 Android 平台，nvue 支持原生样式的 elevation 属性来实现阴影效果，兼容性更好。示例：

    width: 140px;
height: 140px;
border-radius: 70%;
background-color: #4da2ff;
elevation: 10; /* 控制阴影强度 */

    注意：elevation 的阴影颜色和偏移量是系统默认的，无法像 box-shadow 一样自定义颜色和方向。

  2. 增加外层容器并设置内边距
    如果必须使用 box-shadow，可以为圆形元素添加一个外层容器，通过内边距预留出阴影显示空间：

    <template>
  <view class="shadow-wrapper">
    <view class="circle"></view>
  </view>
</template>
<style scoped>
.shadow-wrapper {
  padding: 10px; /* 预留阴影空间 */
}
.circle {
  width: 140px;
  height: 140px;
  border-radius: 70%;
  background-color: #4da2ff;
  box-shadow: 8px 8px 10px rgba(103, 103, 103, 1.0);
}
</style>

  3. 调整阴影偏移量和模糊半径
    适当减小阴影的偏移量或模糊半径，避免阴影超出元素边界被裁剪：

    box-shadow: 4px 4px 8px rgba(103, 103, 103, 0.8);
回到顶部