内联border-radius属性在生成的邮件中不生效的技术咨询

哦，这个问题我太熟了！邮件客户端的CSS支持简直是前端开发者的噩梦，尤其是Outlook这类老牌客户端，对border-radius这类CSS3属性的支持特别拉胯——哪怕你写了内联样式也没用，因为它用的是Word的渲染引擎，对现代CSS属性兼容性极差。你的C#发送邮件的代码本身没什么问题，问题出在邮件HTML内容的兼容性上，给你几个实用的解决方案：

• 用VML兼容Outlook
  这是目前最靠谱的方案，VML是微软的矢量标记语言，Outlook原生支持。我们可以给需要圆角的元素同时写VML代码和标准CSS，让支持的客户端用CSS，Outlook用VML。比如一个带圆角的按钮示例：

  <div style="border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;">
    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="10%" stroke="f" fillcolor="#0071bc">
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        点击这里
      </center>
    </v:roundrect>
    <![endif]-->
    <!--[if !mso]><!-->
    <a href="#" style="background-color:#0071bc;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">
      点击这里
    </a>
    <!--<![endif]-->
  </div>
  

  其中arcsize属性控制圆角的弧度，数值越大圆角越明显。

• 用图片作为降级方案
  如果是纯色背景的圆角元素，你可以提前切好带圆角的图片，用内联样式设置为背景图，这样所有客户端都能显示圆角效果。不过要注意，部分用户会禁用图片，所以最好同时设置背景色作为降级，或者和VML方案结合使用。

• 改用table布局
  邮件客户端对<div>的样式支持很不稳定，建议尽量用<table>来构建邮件结构。把需要圆角的内容放在<td>里，然后给<td>添加内联样式，再配合上面的VML方案，兼容性会更好。

总结一下：你的SmtpClient发送逻辑没问题，核心是调整邮件HTML的兼容性，针对不同邮件客户端做适配，才能让圆角效果正常显示。

内容的提问来源于stack exchange，提问作者Drunkwolf