灰度化和圆角是两类完全不同的处理路径，不能靠一个border-radius或filter同时搞定；App端灰度必须走manifest.json配置，Web和小程序端才可JS/CSS控制；圆角在绝大多数场景下用CSS就够了，但canvas海报或l-painter生成图需单独设置。
直接说结论：灰度化和圆角是两类完全不同的处理路径，不能靠一个 border-radius 或一个 filter 同时搞定；App 端灰度必须走 manifest.json 配置，Web 和小程序端才可 JS/CSS 控制；圆角在绝大多数场景下用 CSS 就够了，但 canvas 海报或 l-painter 生成图需单独设置。
uni-app 中图片灰度化为什么在 App 端不生效
因为 App 端（iOS/Android）的原生渲染层不识别 filter: grayscale(1) 这类 CSS 滤镜，哪怕加在 html 或 body 上也无效。这不是写法问题，是底层限制。
-
manifest.json中必须写对位置："plus": { "style": { "grayscale": true } }，漏掉style一层或写到h5下就白配 - 值必须是布尔型
true，不是字符串"true"，也不是数字1 - 改完要「重新云打包」或「重做自定义基座」，热更新、HMR、本地调试都不触发该效果
- 灰度后，原生组件（如
picker、camera、状态栏图标）仍为彩色，前端无法覆盖
微信小程序和 H5 端怎么安全加灰度
这两个平台支持 filter，但要注意兼容性和作用范围：
- 只对普通 DOM/WebView 内元素生效，不能影响原生组件（如小程序的
cover-image） - 推荐加在容器节点上，而不是单张
image标签，避免重复写样式：.gray-wrapper { filter: grayscale(1); } - 若需动态开关，用 class 切换比内联 style 更可控：
uni.$nextTick(() => this.isGray && uni.createSelectorQuery().in(this).select('.gray-wrapper').exec()) - 旧版微信（grayscale，可降级为
filter: brightness(0.8) contrast(0.7)模拟弱灰效果
图片圆角在不同场景下的写法差异
CSS 圆角最常用，但实际项目里常踩三个坑：溢出、层级、canvas 裁剪失效。
立即学习“前端免费学习笔记（深入）”；
- 普通
image标签加border-radius必须配合overflow: hidden容器，否则 iOS 会显示直角溢出（尤其mode="aspectFill"时） - 如果图片是
background-image，圆角直接写在父容器上即可，不用额外裁剪 - 用
l-painter生成海报时，borderRadius是add()的参数之一，支持数组形式：borderRadius: [10, 10, 0, 0]（左上、右上、右下、左下） - canvas 手动绘制时，必须先调用
ctx.clip()，再drawImage()，顺序反了圆角无效
灰度 + 圆角组合需求的真实落地方式
没有“一键双效”的属性。得拆开处理：
- App 端：灰度靠
manifest.json全局开启；圆角仍用 CSS 或l-painter单独加，二者互不干扰 - 小程序/H5：可同时写
filter和border-radius，但注意filter会提升图层（z-index 效果），可能遮挡相邻元素，必要时加transform: translateZ(0)回退合成层 - 需要服务端返回灰度图再加圆角？那就别前端处理，让后端 API 返回已处理好的 URL，减少客户端负担
最容易被忽略的一点：灰度配置只在 App 打包时固化，而圆角样式随时可改——这意味着上线后想临时关闭灰度，只能发新包；但改个圆角半径，热更新就能推下去。
