边框图像未显示在 HTML 电子邮件中答案

【问题标题】：border-image not showing in HTML Email边框图像未显示在 HTML 电子邮件中
【发布时间】：2016-06-26 02:28:44
【问题描述】：

所以我有一个带边框的 div。但是，没有显示边框图像。它显示为普通的实心边框。很奇怪，该 URL 有效且有效，它来自谷歌驱动器，一切看起来都很好。 HTML 本身可以工作，但是当我在电子邮件中使用它时却不行。

&lt;div style="-webkit-border-image: url(https://s32.postimg.org/rfht7aqx1/border.png) 46px round;-o-border-image: url(https://s32.postimg.org/rfht7aqx1/border.png) 46px round;border-image: url(https://s32.postimg.org/rfht7aqx1/border.png) 46 round;border-width: 46px;border-style: solid;"&gt;Hello world!!!&lt;/div&gt;

这真的很奇怪；我从来没有见过这样的事情。我正在发送到 Gmail 顺便说一句，我不确定它是否适用于 Outlook 或其他东西。

PS：我知道边框看起来有点怪；那是因为它的高度很小。我知道这一点，所以不要抱怨。

【问题讨论】：

不幸的是，大多数电子邮件客户端不支持这类东西，Gmail 就是其中之一。据我所知，没有真正有效的替代方案。

标签： html gmail border-image

【解决方案1】：

其实没办法，Gmail不支持border-image属性。

在此处查看标签兼容性： https://www.campaignmonitor.com/css/

【讨论】：

该死的。那么有什么服务可以让我使用它吗？
或者你能把我链接到一个关于用表格制作边框的教程吗？
如果您有一个简单的边框，您可以在<td> 元素上使用边框：<td style="border: solid 1px #e9e9e9;>[your content]</td> 并将您的内容放入此元素中。否则，您可以分割您的边框图像并使用表格blog.bronto.com/commercemarketing/… 复制它（就像马赛克一样，您的内容位于中心）

【解决方案2】：

由于大多数电子邮件供应商不支持border-image，您可以使用background-image（因为Gmail 支持该属性）属性与div 或您的任何其他元素结合使用来模拟border-image觉得用。如果您在 div 上使用 padding 属性，则必须稍微修改它。但我就是这样做的，它看起来就像border-image。

这是我的样子：

【讨论】：