html - 在电子邮件签名中使用高级ccs图标

有关如何在电子邮件签名中附加图形的问题已久远。即我可以将图像附加为链接，这意味着Outlook用户将看不到它。我可以将它们嵌入为已编码的图像，但是仅当从Outlook发送（我们同时使用gmail和Outlook）发送时有效。所以我有一个想法，如果我仅使用CSS图标，那会为我省去些麻烦。

不过，这是我的问题，我将如何处理。在网页上，方法很简单，只需将其添加到样式表中或样式标签之间，如下所示

<style>
.marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}
</style>

但是，我似乎无法在电子邮件签名中获得该解决方案。可能我实际上可以将其嵌入div样式参数中，但不确定是否可以将高级样式放入div样式中。

我在说的是以下内容

<div style=".marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}"></style>

最佳答案

好吧，您可以尝试。但是，不行。您在style属性中添加的样式应该只是该元素的样式，而不是文档的完整样式表，甚至只是子元素。

但是，大多数邮件客户端确实会忽略style标签。此外，他们可能会忽略或显式删除某些内联样式，因此，我将确保在各种客户端上对其进行全面测试，或者立即决定拒绝使用它，而仅使用几个图像或单个sprite图像。

关于html - 在电子邮件签名中使用高级ccs图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30711619/