字体渐变在全邮件客户端的兼容问题及Gmail异常修复咨询

能否在所有邮件客户端（含Gmail）正常显示字体渐变？ #

不能。不同邮件客户端对CSS的支持差异极大，尤其是Gmail，它完全不支持-webkit-background-clip: text和-webkit-text-fill-color: transparent这类实现文字渐变的核心属性。你的代码在Gmail中出现背景变色、字体变白的异常，正是因为Gmail错误解析了这些不支持的属性：它会忽略透明文字的设置，却保留了bgcolor属性，最终导致样式混乱。

针对Gmail移除异常格式的方案 #

可以通过双重嵌套span+Gmail专属CSS hack实现兼容，让支持渐变的客户端显示渐变效果，Gmail显示正常的回退样式：

修改后的代码示例 #

<span class="gradient-text" style="background: -webkit-linear-gradient(180deg, #FFF06B 0%, #FFC839 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700;">
  <span style="color: #FFC839; font-weight: 700;">minimum 50€</span>
</span>
<style>
  /* 仅针对Gmail生效的样式 */
  .gmail .gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
  }
</style>

原理说明 #

• 支持渐变的客户端（如Apple Mail、Outlook Mac）会优先解析外层span的webkit渐变属性，内层span的color会被-webkit-text-fill-color: transparent覆盖，正常显示渐变文字。
• Gmail会自动给页面<body>添加class="gmail"，此时.gmail .gradient-text的样式会生效，移除所有渐变相关设置，同时内层span的color和font-weight会正常显示，避免异常。
• 移除原代码中的bgcolor属性——这个过时的HTML属性会干扰现代客户端和Gmail的样式解析。

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