Question

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

＆＃13;

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

＆＃13;

如果我想做的事情是可能的，请告诉我。

Answer 1

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

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

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

Answer 2

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

请注意，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>

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

Answer 3

你的CSS看起来正确并适合我。文字显示在黑暗的背景上吗？因为在明亮的背景上可能很难看到白色文字阴影。还要尝试在样式的末尾添加！important。另外，请检查您的浏览器元素检查器，然后重写您的样式。

Answer 4

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

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/

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

4 个答案: