邊框圖像不顯示在HTML電子郵件

所以我有一個帶邊框的div。但是，邊框圖像沒有顯示出來。它將其顯示爲普通的實心邊框。這很奇怪，這個網址是有效的，它是從谷歌驅動器，一切看起來不錯。 HTML本身可以工作，但是當我在電子郵件中使用它時，它不會。邊框圖像不顯示在HTML電子郵件

<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;">Hello world!!!</div>

這很古怪;我從來沒有見過這樣的事情。我正在發送到Gmail BTW，我不確定它是否適用於Outlook或其他內容。

PS：我知道這個邊框看起來有點不可思議;那是因爲它的高度很小。我意識到這一點，所以不要抱怨。

來源

2016-06-26 Ab_

不幸的是大多數的電子郵件客戶端不支持這類事情時，Gmail就是其中之一。據我所知，沒有真正有效的選擇。 – Dev1997

其實沒有辦法，Gmail不支持border-image屬性。

檢查這裏的標籤兼容性： https://www.campaignmonitor.com/css/

來源

2016-06-29 10:36:21 pastorello

該死的。那麼有沒有我可以使用的服務可以使它工作？ –

或者你可以鏈接到一個關於如何使邊框脫離桌面的教程嗎？ –

如果你有一個簡單的邊框，可以將''元素上使用邊界： ' [內容]' ，把你的內容到這個元素。否則，你可以切片你的邊界圖像，並使用表格複製它 http://blog.bronto.com/commercemarketing/how-to-build-an-email-using-sliced-images-without-embarrassing-yourself-或者正在發射/ （就像馬賽克一樣，你的內容在中心） – pastorello

由於border-image不被大多數電子郵件廠商的支持，您可以使用background-image（因爲一個是支持Gmail）屬性組合與div只是模擬border-image或者你喜歡使用的任何其他元素。如果你在你的div上使用它，你將不得不修改padding屬性。但這是我做到的，它看起來就像一個border-image。

這裏是我的樣子：

來源

2017-07-05 03:25:15 Taurus

邊框圖像不顯示在HTML電子郵件

回答

相關問題