在 HTML 内联 CSS 电子邮件中使用 text-shadow

Question

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

<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>

请让我知道我正在尝试做的事情是否可行。

Answer 1

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

Answer 2

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

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

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

Answer 3

对我有用，我只是改变了阴影的颜色。

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/

Answer 4

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

请注意，并非所有电子邮件客户端都支持、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/

在 HTML 内联 CSS 电子邮件中使用 text-shadow

Using text-shadow in HTML email with inline CSS

html

css

html-email