本文详解如何通过css类选择器或内联样式，在html中灵活控制图片的圆角形状，特别适配power automate邮件发送场景，并规避多head/body标签、类名语法错误等常见陷阱。
在HTML中实现图片圆角（如方形、圆角矩形、正圆等），关键在于正确使用CSS的 border-radius 属性，并通过类选择器（.classname） 或内联样式（style="..."） 精准控制不同图片的外观。你原始代码中存在两个核心问题：一是误将类选择器写成 img1（缺少点号.，应为 .img1），二是HTML结构非法——一个文档只能有一个
和一个 ，重复声明会导致解析失败或样式失效。✅ 正确做法如下（推荐双兼容方案）：
✅ 方案一：使用内部CSS类（适用于支持
Square Image (Default)
@@##@@Rounded Image (Circle)
@@##@@Soft Rounded Image
@@##@@
✅ 方案二：纯内联样式（推荐用于Power Automate + Gmail等限制
Gmail等部分邮件客户端会剥离
Square Image
@@##@@Circular Image
@@##@@Subtly Rounded Image
@@##@@
? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 类选择器必须以 . 开头（如 .rounded），否则浏览器视为标签名（img1 会被当成不存在的HTML元素）；
- ❌ 禁止重复 / —— HTML文档结构必须严格遵循 html > head + body 的单层嵌套；
- ⚠️ 邮件兼容性优先：Power Automate 发送邮件时，建议统一采用内联样式方案，确保Gmail、Outlook Web、Apple Mail等主流客户端均能正确渲染；
- ? border-radius: 50% 实现正圆的前提是图片宽高相等（如 width="200" 且无拉伸），若尺寸不一致，建议配合 object-fit: cover 或预设正方形容器；
- ? 如需响应式圆角，可结合 max-width: 100% 与相对单位（如 rem），但邮件中更推荐固定像素值（如 8px, 50%）以保障兼容性。
通过以上方法，你就能在单一HTML文档中自由组合多种图片形态，既满足设计需求，又完全适配自动化邮件工作流。
