在 html 邮件（如 power automate 发送场景）中，可通过 css 类或内联样式精准控制每张图片的圆角（border-radius），但需避免重复 head/body 标签、正确使用类选择器（`.classname`），并优先采用内联样式以兼容 gmail 等邮件客户端。
在构建 HTML 邮件时，尤其是通过 Power Automate 等自动化工具发送，HTML 结构必须严格规范：整个文档只能有一个 <head> 和一个 <body> 标签。你原始代码中重复定义了 <head> 和 <body>，这不仅会导致渲染异常，还可能被邮件客户端直接截断或忽略样式。
此外，CSS 类选择器必须以英文句点 . 开头（如 .rounded），而 img1 是一个标签名（HTML 中并不存在 <img1> 元素），因此 .img1 才是合法的类选择器写法——但更推荐语义化命名，如 .rounded 或 .circle。
✅ 正确做法：两种兼容方案
方案一：使用 <style> 块（适用于 Outlook Desktop、Apple Mail 等支持嵌入样式的客户端）
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.rounded { border-radius: 50%; }
.slightly-rounded { border-radius: 12px; }
.square { border-radius: 0; }
</style>
</head>
<body>
<h2>Square Image (default)</h2>
<img src="img_avatar.png" alt="Avatar" width="200" class="square">
<h2>Slightly Rounded Image</h2>
<img src="img_avatar.png" alt="Avatar" width="200" class="slightly-rounded">
<h2>Fully Rounded (Circle) Image</h2>
<img src="img_avatar.png" alt="Avatar" width="200" class="rounded">
</body>
</html>方案二：纯内联样式（强烈推荐用于 Gmail、Yahoo、Outlook Web 等限制 <style> 的邮件客户端）
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Square Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 0;"> <h2>Slightly Rounded Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 12px;"> <h2>Fully Rounded (Circle) Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 50%;"> </body> </html>
⚠️ 注意事项：width 属性建议用 width="200" 而非 style="width:200px"：部分邮件客户端对内联 style 中的像素单位解析不稳定，使用原生 width 属性兼容性更佳；避免 height 与 width 同时设置：除非明确需要拉伸，否则仅设 width 并让高度自动等比缩放，防止图片变形；圆角 50% = 完美圆形的前提是图片宽高相等：若源图非正方形，请先裁剪或配合 object-fit: cover（但注意该属性在多数邮件客户端中不支持，故推荐预处理图像）；Power Automate 中发送 HTML 邮件时，确保内容类型为 text/html，且字符串未被意外转义（如 < 变成
总结：在 HTML 邮件开发中，“写得对”不如“发得稳”。优先使用内联 style + 语义化结构，摒弃重复标签与无效选择器，即可轻松实现多图多形状的精准控制。
