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