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