如何在Outlook客户端查看的邮件中使用linear-gradient？

Outlook（尤其是桌面端）对CSS linear-gradient的支持几乎为零，唯一可靠的替代方案是使用VML（Vector Markup Language）——微软专属的矢量标记语言，它能在Outlook中稳定渲染渐变背景或元素。同时可以结合CSS渐变做优雅降级，让Gmail、Apple Mail等主流客户端使用更现代的样式方案。

核心实现逻辑 #

• 针对Outlook：用VML绘制渐变图形，作为元素背景或独立视觉块
• 针对其他客户端：保留linear-gradient CSS属性，通过Outlook专属条件注释实现代码隔离——Outlook解析VML、忽略CSS渐变，其他客户端则相反

具体代码示例 #

以下是兼容Outlook和主流客户端的渐变按钮实现：

<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tr>
    <td>
      <!--[if mso]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:180px; height:40px; v-text-anchor:middle;">
        <v:fill type="gradient" color="#ff6b6b" color2="#ee5a24" angle="90" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
          <div style="width:180px; height:40px; background: linear-gradient(180deg, #ff6b6b, #ee5a24); text-align:center; line-height:40px; font-family:Arial, sans-serif; font-size:16px; color:#ffffff; text-decoration:none; border-radius:4px;">
            <a href="#" style="color:#ffffff; text-decoration:none; display:block;">点击按钮</a>
          </div>
      <!--[if mso]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

关键细节说明 #

• 条件注释<!--[if mso]>：仅Outlook会解析其中的VML代码，其他客户端直接跳过
• VML渐变配置：<v:fill>的color是起始色，color2是结束色，angle控制渐变方向（注意：VML的角度与CSS相反，CSS的90deg对应VML的0deg，需按需调整）
• 样式统一：CSS部分和VML部分的尺寸、颜色需保持一致，避免不同客户端出现视觉差异

额外注意事项 #

• 所有VML元素必须声明命名空间xmlns:v="urn:schemas-microsoft-com:vml"，否则Outlook无法识别
• 全页面背景渐变可使用VML的<v:shape>覆盖整个邮件容器，配合CSS背景渐变实现兼容
• 测试时务必用Outlook桌面端（2016/2019/365）预览，网页版Outlook对VML的支持与桌面端存在差异

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