Question

是否可以使用CSS在简报电子邮件中使用渐变元素？是否支持完整属性？

Answer 1

简而言之，没有。

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

您可以随时获得回退，但加载时间不会发生太大变化，添加CSS3只会添加更多代码以便跟踪。

我建议您使用图片代码并在服务器上托管图片，如果您真的必须使用渐变图片。

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

Answer 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中执行主体背景渐变以及其他一些技巧。

Answer 3

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

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

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

3 个答案: