Question

我正在通过凭证信息向我的客户发送电子邮件。我想以图形方式代表一张优惠券。

我提出了一个设置表格样式的想法（因为表格在电子邮件客户端中很容易收到） - 请检查我的解决方案的代码段。

我不想使用图像，因为在大多数电子邮件客户端中默认禁用它们。

我的问题是：邮件客户和程序是否收到了很好的回复，还是应该避免这种做法？

 #badge-ribbon { 
   position: relative; 
   background: red; 
   height: 100px; width: 100px; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px; 
 } 
#badge-ribbon:before, #badge-ribbon:after { 
  content: ''; 
  position: absolute; 
  border-bottom: 70px solid red; 
  border-left: 40px solid transparent; 
  border-right: 40px solid transparent; 
  top: 70px; 
  left: -10px; 
  -webkit-transform: rotate(-140deg); 
  -moz-transform: rotate(-140deg); 
  -ms-transform: rotate(-140deg); 
  -o-transform: rotate(-140deg); } 
#badge-ribbon:after { 
  left: auto; 
  right: -10px; 
  -webkit-transform: rotate(140deg); 
  -moz-transform: rotate(140deg); 
  -ms-transform: rotate(140deg); 
  -o-transform: rotate(140deg); 
}

	<table id="badge-ribbon">

Answer 1

我会避免使用这种技术并使用图像，因为很有可能很多CSS无法在Outlook客户端中运行，Gmail会完全剥离嵌入式CSS。未加载图像的后备使用Alt标记来传送标题/副本

Campaign Monitor CSS support guide

Answer 2

电子邮件中的CSS大约是CSS 1.8级别，它在1998年很少比CSS更令人兴奋或可用。最好的办法是发送一封简单的电子邮件，其中包含使用style元素和table设计结构的HTML代码覆盖。图像和大颜色块是最好的方法，因为CSS 3支持非常不存在，并且HTML CSS支持通常非常不完整且不均匀，甚至取决于CSS的呈现方式，有些内容可以作为style元素使用但是通常会从HTML代码中删除附加CSS样式表。

电子邮件客户端通常不支持CSS3。

拥有一个简单干净的电子邮件，其中包含明亮的大胆色块和/或图像以及清晰的网页链接，以漂亮的HTML5和CSS3显示相同的信息。

电子邮件中的形状 - 一个好习惯？

2 个答案: