uni-app uvue box-shadow 透明度失效

uni-app uvue box-shadow 透明度失效

开发环境 版本号 项目创建方式
Windows win11 24h2 HBuilderX
示例代码:

box-shadow: rgba(99, 99, 99, 0.2) 0rpx 2rpx 8rpx 0rpx;

操作步骤:

box-shadow: rgba(99, 99, 99, 0.2) 0rpx 2rpx 8rpx 0rpx;

预期结果:

box-shadow: rgba(99, 99, 99, 0.2) 0rpx 2rpx 8rpx 0rpx;

实际结果:

box-shadow: rgb(99, 99, 99) 0rpx 2rpx 8rpx 0rpx;

bug描述:

box-shadow: rgba(99, 99, 99, 0.2) 0rpx 2rpx 8rpx 0rpx; 渲染效果 千奇古怪 附加一张是 真机调试,一张是H5


更多关于uni-app uvue box-shadow 透明度失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

确实有这个问题 应该是颜色顺序导致的 把颜色放后面就好了 你试下 box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(202, 19, 99, 0.2);

更多关于uni-app uvue box-shadow 透明度失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 谢谢

这是一个已知的uvue样式渲染问题,在部分平台上rgba的透明度在box-shadow中可能不会被正确解析。目前建议的解决方案是:

  1. 使用十六进制颜色值加透明度替代:
box-shadow: #63636333 0rpx 2rpx 8rpx 0rpx;
  1. 或者使用透明度简写:
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(99, 99, 99, 0.2);
回到顶部