本文详解如何通过css类选择器或内联样式，在html中灵活控制图片的圆角形状，特别适配power automate邮件发送场景，并规避多head/body标签、类名语法错误等常见陷阱。
在HTML中实现图片圆角（如方形、圆角矩形、正圆等），关键在于正确使用CSS的 border-radius 属性，并通过类选择器（.classname） 或内联样式（style="..."） 精准控制不同图片的外观。你原始代码中存在两个核心问题：一是误将类选择器写成 img1（缺少点号.，应为 .img1），二是HTML结构非法——一个文档只能有一个 <head> 和一个 <body>，重复声明会导致解析失败或样式失效。
✅ 正确做法如下（推荐双兼容方案）：
✅ 方案一：使用内部CSS类（适用于支持<style>的邮件客户端）
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 默认图片：直角（可选，显式重置） */
img {
border-radius: 0;
}
/* 自定义圆形类 */
.rounded {
border-radius: 50%;
}
/* 可选：圆角矩形（如8px） */
.rounded-lg {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Square Image (Default)</h2>
<img src="img_avatar.png" alt="Avatar" width="200">
<h2>Rounded Image (Circle)</h2>
<img src="img_avatar.png" class="rounded" alt="Avatar" width="200">
<h2>Soft Rounded Image</h2>
<img src="img_avatar.png" class="rounded-lg" alt="Avatar" width="200">
</body>
</html>✅ 方案二：纯内联样式（推荐用于Power Automate + Gmail等限制<style>的环境）
Gmail等部分邮件客户端会剥离 <style> 标签，此时必须将 border-radius 直接写入 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>Circular Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 50%;"> <h2>Subtly Rounded Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 12px;"> </body> </html>
? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 类选择器必须以 . 开头（如 .rounded），否则浏览器视为标签名（img1 会被当成不存在的HTML元素）；
- ❌ 禁止重复 <head> / <body> —— 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文档中自由组合多种图片形态，既满足设计需求，又完全适配自动化邮件工作流。
