关于 Outlook 邮件临时文件中 CSS 的问题

Question

我正在为库存确认电子邮件制作一个邮件模板，我必须做的邮件包含一些我正在努力寻找资源的东西，所以任何关于它的资源如果你知道有帮助的话。我正在尝试制作一个在 outlook/microsoft 邮件上看起来也不错的响应式邮件模板，而为项目颜色制作圆圈对我来说是最麻烦的。

Answer 1

您可以在电子邮件中使用 <style> 标签来创建这样的内容。也支持内联样式。

.circle{
    height: 16px;
    width: 16px;
    border-radius: 50%;
    outline: 2px solid;
    outline-offset: 2px;
    background-color: #f589d9;
}

<div class="circle"></div>

Answer 2

这里有一个示例，说明如何使用 HTML、CSS 以及 The Outlooks 在 Windows 上的专用 VML 回退.

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Question regarding CSS in Outlook mail temp</title>
  <!--  -->
    <!--[if mso]>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
</head>
<body>
  <!--[if !mso]><!-->
  <div style="width:24px;" role="img" aria-label="Pink color">
    <div style="border:4px solid #000; border-radius:50%;">
      <div style="padding:2px;">
        <div style="width:12px; height:12px;background-color:#f587d8; border-radius:50%;"></div>
      </div>
    </div>
  </div>
  <!--<![endif]-->
    <!--[if mso]>
  <v:group style="position:relative; width:24px; height:24px;" coordsize="24,24">
      <v:oval style="position:absolute; left:0; top:0; width:24px; height:24px; z-index:1;" stroked="false" fillcolor="#000000"></v:oval>
      <v:oval style="position:absolute; left:4px; top:4px; width:16px; height:16px; z-index:2;" stroked="false" fillcolor="#ffffff"></v:oval>
      <v:oval style="position:absolute; left:6px; top:6px; width:12px; height:12px; z-index:3;" stroked="false" fillcolor="#f587d8"></v:oval>
  </v:group>
    <![endif]-->
</body>
</html>

这里是test results of rendering on Email on Acid.

关于 Outlook 邮件临时文件中 CSS 的问题

Question regarding CSS in Outlook mail temp

html

css

email

outlook

magento