在带有内联 CSS 的 HTML 电子邮件中使用 text-shadow答案

【问题标题】：Using text-shadow in HTML email with inline CSS在带有内联 CSS 的 HTML 电子邮件中使用 text-shadow
【发布时间】：2016-03-25 17:04:32
【问题描述】：

是否可以将 text-shadow 功能与内联 CSS 一起使用？我试图给我的标题一个边框，但似乎没有任何效果。我正在为 IT 票务应用程序中的电子邮件模板编写此内容，因此无法添加单独的样式表。看来我的选择是有限的。也许我的语法有误？

<h1 style="text-align: center">
<span style="font-family: Verdana">
<span style="text-shadow: -1px -1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, 1px 1px #ffffff">
    Service Request Created
</span>
</span>
</h1>

如果我想要做的事情是否可行，请告诉我。

【问题讨论】：

标签： html css html-email

【解决方案1】：

一种方法是使用双文本（调整阴影颜色以满足您的要求）。

请注意，并非所有电子邮件客户端都支持ShaunOReilly、position: absolute（也可能是opacity）的评论

<h1 style="text-align: center">
  <span style="font-family: Verdana; position: relative">
    <span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; ">
      Service Request Created
    </span>
    <span style="position: relative">
      Service Request Created
    </span>
  </span>
</h1>

更新

不久前，我遇到了另一种在不使用absolute 的情况下定位元素的方式。它在任何地方都经过了测试和工作或多或少^{（但 Outlook 桌面）}，但由于下面链接的文章已有 2 年历史，它甚至可能在今天的 Outlook 桌面版本中工作。

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">  
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
            1
        </div>
    </div>
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
            2
        </div>
    </div>
    <div style="max-height:0;max-width:0;">
        <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
            3
        </div>
    </div>
</div>

源：http://blog.rebelmail.com/absolute-positioning-in-email/

【讨论】：

绝对定位在邮件客户端中不起作用！
@ShaunOReilly 感谢您的评论。更新了我的答案。

【解决方案2】：

为我工作，我只是改变了阴影的颜色。

See this fiddle

<span style="text-shadow: -1px -1px #f00, -1px 1px #f00, 1px -1px #f00, 1px 1px #f00">

您还可以查看这篇文章以了解 CSS3 在电子邮件客户端上的兼容性：

https://www.campaignmonitor.com/blog/email-marketing/2010/04/css3-support-in-email-clients/

【讨论】：

【解决方案3】：

这不是内联问题。电子邮件客户端限制了许多 CSS 属性。文本阴影不适用于所有流行的客户端：https://www.campaignmonitor.com/css/。

一种解决方案是您可以将文本变成图像。

此外，内联样式声明仍应以分号结尾。

【讨论】：

是的，我很确定这是正确的。可以试试图片路由。谢谢！
这是正确的答案，也是一个很好的选择。请标记为已回答

【解决方案4】：

您的 css 看起来正确并且适合我。文本是否显示在深色背景上？因为在明亮的背景上可能很难看到白色文本阴影。还可以尝试在样式末尾添加 !important。还要检查您的浏览器元素检查器，您的样式是否被覆盖。

【讨论】：

!important 没用。我认为它在这个客户端上不起作用。
!important 通常不是一个好的解决方案。 Obligatory CommitStrip :-)