ad_yfq

发布：2021-11-17 16:58
更新：2021-11-19 10:56
阅读：919

【报Bug】nvue页面圆形div阴影被切

分类：uni-app

bug反馈

产品分类： 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文件里写了一个圆形添加了一个阴影，真机测试正常，打包后阴影被部分遮挡

2021-11-17 16:58 负责人:无分享

3 个回复

ad_yfq (作者)

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

DCloud_UNI_Anne

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

青阳_1900

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

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

青阳_1900

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

2021-11-19 10:58
ad_yfq (作者)

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

2021-11-22 09:36

该问题目前已经被锁定, 无法添加新回复

【报Bug】nvue页面圆形div阴影被切

示例代码：

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

操作步骤：

打包安装后出现问题

预期结果：

阴影正常显示

实际结果：

阴影被自身的宽高截断

bug描述：

3 个回复

公告

相关问题

【报Bug】nvue页面圆形div阴影被切

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

操作步骤： 打包安装后出现问题

预期结果： 阴影正常显示

实际结果： 阴影被自身的宽高截断

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

示例代码：

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

操作步骤：

打包安装后出现问题

预期结果：

阴影正常显示

实际结果：

阴影被自身的宽高截断