是否可以在电子邮件中使用渐变？答案

【问题标题】：Is it possible to use gradients in emails?是否可以在电子邮件中使用渐变？
【发布时间】：2012-12-07 00:10:59
【问题描述】：

是否可以使用 CSS 对时事通讯电子邮件中的元素使用渐变？是否支持完整的属性？

【问题讨论】：

the full tag 是什么意思？
yaa 我的意思是完整的标签
我还是不明白。你指的是什么标签？没有我知道的 HTML <full> 标签？
不，我正在创建一封新闻信函，我想将其背景颜色与渐变颜色一起使用，这样就可以支持渐变背景颜色。

标签： html css linear-gradients

【解决方案1】：

简而言之，没有。

电子邮件客户端很少支持 HTML5 或 CSS3，因此它会中断任何不支持的客户端。

你总是可以有一个后备，但加载时间不会改变太多，添加 CSS3 只是添加更多代码来跟踪。

我建议使用图像标签并将图像托管在您的服务器上，前提是您真的必须使用渐变。

对于电子邮件，通常越简单越好。就个人而言，我更喜欢接收纯文本。

【讨论】：

同意它的支持可能非常有限，但使用它不会有任何害处，并且在那些不支持的情况下退回到纯色背景 - 就像你在网络上所做的那样页。从这个意义上说，它不会破坏电子邮件，只是不会显示渐变。
@Alfo 您是否有任何具体信息可以作为您回答的依据？你能指定“很少”吗？
4年前的回答，没更新，价值不大。

【解决方案2】：

如今，电子邮件客户端对 CSS 渐变的支持得到了改进，这样的事情在大多数情况下都可以使用：

background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);

Windows 上的 Outlook 不支持该功能，但您可以使用 VML（矢量标记语言）使其也可以在那里工作，即：

<!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
  <v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">            
  <div><![endif]-->
  Text over gradient
<!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->

我在 gradients in email 上为 Maizzle 框架编写了一个指南，它还展示了如何在 Outlook 中进行正文背景渐变，以及一些其他技巧。

【讨论】：

【解决方案3】：

FWIW，这是我通过电子邮件获取 CSS 支持的首选资源：https://www.campaignmonitor.com/css/

它没有背景渐变的具体信息，因为它属于background-image 属性。我的预感是电子邮件客户端之间存在不一致的支持（如果有的话），因为它是 CSS 的一个相当功能。我唯一的犹豫是我认为背景渐变被视为background-image，除了 Outlook 之外似乎有不错的支持。

【讨论】：