Использование Emoji как CSS Border

Я ищу способ использования emoji в качестве рамки для новостного бюллетеня HTML. В значительной степени, я хочу, чтобы рождественская елка emoji() повторялась вокруг div. Любые идеи о том, как это сделать?Использование Emoji как CSS Border

источник

2016-12-17 tcam27

У вас не будет большой удачи во многих недавних достижениях в CSS, потому что рабочий стол Outlook в Windows с Office 2007 использует Word как средство визуализации HTML вместо Trident (Internet Explorer), поэтому вы ограничены CSS1 и основными функциями CSS2, к сожалению. Возможно, вам даже придется прибегать к макетам '

'. – Dai

Не могли бы вы сообщить мне, что не работает с ответом дано, так что я смогу настроить и вас принять? – LGSon

ответ

Как правило, одним из способов было бы использовать свойство border-image, которое требует использования изображения, а не символа. Как указано в комментариях, к сожалению, это не очень хорошо поддерживается в электронных письмах.

.christmas { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    border: 33px solid transparent; 
 
    -moz-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat; 
 
    -webkit-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat; 
 
    -o-border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat; 
 
    border-image: url("https://i.stack.imgur.com/baEaT.png") 33 repeat; 
 
}

<div class="christmas"> 
 
    Merry Christmas! 
 
</div>

источник

2016-12-17 15:37:13 Marvin

Я очень сомневаюсь, что это будет работать в HTML-письме. – sevenseacat

Хорошее решение, но оно поддерживается только в iPhone iOS 7/iPad и Apple Mail 6.5, в соответствии с справочником CSS [Мониторинг кампании] (https://www.campaignmonitor.com/css/). – Roy

Я не очень хорошо знаком с электронными письмами в формате HTML, поэтому я был слишком оптимистичен. Спасибо за подсказку, я обновил свой ответ с вашими комментариями. – Marvin

Как вы будете использовать его для почты, таблица будет для вас решение, как этот

<table style="width: 478px;height: 285px;"> 
 
    <tr> 
 
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td> 
 
    </tr> 
 
    <tr> 
 
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y"></td> 
 
    <td valign="top" style="padding: 20px;"> 
 

 
     Content 
 
     
 
    </td> 
 
    <td style="width:26px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-y;"></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="3" style="height:30px; background-image: url(https://i.stack.imgur.com/baEaT.png); background-repeat: repeat-x"></td> 
 
    </tr> 
 
</table>

источник

2016-12-17 15:59:36 LGSon

ответ

Смежные вопросы