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