在 html 邮件中（如 power automate 发送），需通过 css 类或内联样式精准控制图片圆角；关键在于正确使用类选择器（`.classname`）、避免重复 `
`/`` 标签，并优先采用内联样式以兼容邮件客户端（如 gmail）。HTML 邮件对 CSS 支持极为有限——多数客户端（尤其是 Gmail、Outlook Web）会剥离
✅ 正确做法：优先使用内联 border-radius
Square Image (No Roundness)
@@##@@Fully Rounded Image (Circle)
@@##@@Subtly Rounded Corners (e.g., 12px)
@@##@@
? 说明： border-radius: 50% 使正方形图片变为圆形（宽高需相等）；若图片非正方，结果为椭圆。 border-radius: 12px 为像素值，适用于任意尺寸，实现柔和直角效果。 使用 width="200" 属性（而非 style="width:200px"）更符合邮件 HTML 的兼容性规范（部分客户端对 style 中的 width 解析不稳定）。
⚠️ 常见错误与修正
- ❌ 错误：img1 { ... } —— 这是标签选择器，浏览器会查找
元素，而非 class="img1"；类选择器必须加点号：.img1。 - ❌ 错误：重复 和 标签 —— 一个 HTML 文档只能有一个 和一个 ，否则解析异常或被截断。
- ❌ 错误：依赖
✅ 进阶建议（Power Automate 场景）
若需动态生成不同圆角图片（例如根据数据字段决定是否圆形），可在 Power Automate 的「HTML 代码」操作中拼接内联样式：
@@##@@
总结
- ✅ 邮件优先级：内联样式 > 内部样式 > 外部样式
- ✅ border-radius 支持 %（基于宽高）和 px/em（固定值），按需选用
- ✅ 检查图片宽高比：圆形仅在 width == height 时视觉准确
- ✅ 测试工具推荐：Email on Acid 或 Litmus 验证多客户端渲染效果
遵循以上原则，即可在 Power Automate 发送的 HTML 邮件中稳定、灵活地实现各类图片圆角效果。
