HTML图片圆角设置教程详解

在 HTML 邮件（如 Power Automate 发送场景）中，可通过 CSS 类或内联样式精准控制每张图片的圆角（border-radius），但需避免重复 head/body 标签、正确使用类选择器（`.classname`），并优先采用内联样式以兼容 Gmail 等邮件客户端。

在构建 HTML 邮件时，尤其是通过 Power Automate 等自动化工具发送，HTML 结构必须严格规范：整个文档只能有一个 和一个 标签。你原始代码中重复定义了

此外，CSS 类选择器必须以英文句点 . 开头（如 .rounded），而 img1 是一个标签名（HTML 中并不存在 元素），因此 .img1 才是合法的类选择器写法——但更推荐语义化命名，如 .rounded 或 .circle。

✅ 正确做法：两种兼容方案

方案一：使用

  <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>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" class="square"><h2>Slightly Rounded Image</h2>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" class="slightly-rounded"><h2>Fully Rounded (Circle) Image</h2>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" class="rounded">

方案二：纯内联样式（强烈推荐用于 Gmail、Yahoo、Outlook Web 等限制

  <meta name="viewport" content="width=device-width, initial-scale=1"><h2>Square Image</h2>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" style="border-radius: 0;"><h2>Slightly Rounded Image</h2>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" style="border-radius: 12px;"><h2>Fully Rounded (Circle) Image</h2>
  <img src="img_avatar.png" alt="Avatar"    style="max-width:100%" style="border-radius: 50%;">

⚠️ 注意事项：

• width 属性建议用 width="200" 而非 style="width:200px"：部分邮件客户端对内联 style 中的像素单位解析不稳定，使用原生 width 属性兼容性更佳；
• 避免 height 与 width 同时设置：除非明确需要拉伸，否则仅设 width 并让高度自动等比缩放，防止图片变形；
• 圆角 50% = 完美圆形的前提是图片宽高相等：若源图非正方形，请先裁剪或配合 object-fit: cover（但注意该属性在多数邮件客户端中不支持，故推荐预处理图像）；
• Power Automate 中发送 HTML 邮件时，确保内容类型为 text/html，且字符串未被意外转义（如

总结：在 HTML 邮件开发中，“写得对”不如“发得稳”。优先使用内联 style + 语义化结构，摒弃重复标签与无效选择器，即可轻松实现多图多形状的精准控制。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML图片圆角设置教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。