在 html 邮件开发（如 power automate 发送邮件）中，可通过 css 类或内联样式为 `` 元素单独控制圆角（`border-radius`），但需避免重复标签、正确使用类选择器（`.class` 而非 `class`），并兼顾邮箱客户端对 `
要实现“同一页面中部分图片方形、部分图片圆形”，关键在于精准控制样式作用范围，而非依赖标签名（如 img1 是非法选择器）。以下是专业、可落地的解决方案：
✅ 正确做法：使用类选择器 + 合理 HTML 结构
CSS 类选择器必须以英文句点 . 开头，例如 .rounded；同时，一个 HTML 文档只能有一个 <head> 和一个 <body> —— 原代码中重复定义会导致解析异常或样式失效。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 默认图片为直角（可选） */
img { border-radius: 0; }
/* 专用于圆形图片的类 */
.rounded { border-radius: 50%; }
</style>
</head>
<body>
<h2>Square Image (Default)</h2>
<img src="img_avatar.png" alt="Avatar" width="200">
<h2>Rounded Image (Class-based)</h2>
<img src="img_avatar.png" class="rounded" alt="Avatar" width="200">
</body>
</html>⚠️ 邮件兼容性优先：推荐内联样式（尤其 Gmail 等客户端）
多数企业邮箱（如 Gmail、Outlook Web）会剥离 <style> 标签或禁用外部/嵌入式 CSS。因此，对关键样式（如 border-radius）应直接写入 style 属性，确保 100% 生效：
<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>Rounded Image</h2> <img src="img_avatar.png" alt="Avatar" width="200" style="border-radius: 50%;"> </body> </html>
? 注意： width 属性推荐用 width="200"（HTML 属性）或 style="width:200px"（CSS），二者等效，但内联 style 更易统一管理； border-radius: 50% 实现真正圆形（宽高相等时），若图片非正方形，建议配合 object-fit: cover 和容器约束，但邮件中该属性支持度低，稳妥做法是预处理为正方形图片； 避免使用 img1 这类自定义标签名——HTML 中 <img> 是唯一合法标签，img1 不是标准元素，浏览器会忽略其样式规则。
✅ 总结：三步写出可靠邮件图片圆角
- 结构合规：仅一个 <head>、一个 <body>，无重复或嵌套；
- 选择器正确：类名用 .rounded，非 rounded 或 img1；
- 邮件友好：优先采用 style="border-radius:50%" 内联写法，绕过客户端 CSS 过滤风险。
按此规范编写，即可在 Power Automate 发送的 HTML 邮件中，稳定实现差异化图片圆角效果。
立即学习“前端免费学习笔记（深入）”；
