그림 이모지를 CSS 테두리로 사용

HTML 회보의 테두리로 이모티콘을 사용하는 방법을 찾고 있습니다. 꽤 많이, 나는 크리스마스 트리 emoji() div 주위에 반복 싶어요. 어떻게하는지에 대한 아이디어가 있습니까?그림 이모지를 CSS 테두리로 사용

출처

2016-12-17 tcam27

같은 당신을위한 해결책이 될 것입니다 Office 2007 이후 Windows의 데스크톱 Outlook은 Trident (Internet Explorer) 대신 HTML을 HTML 렌더러로 사용하기 때문에 CSS1과 기본 기능에 국한되므로 CSS의 많은 반전 점진적인 발전으로 인해 많은 운이 없을 것입니다. 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

좋은 솔루션이지만 [Campaign Monitor] (https://www.campaignmonitor.com/css/)의 CSS 참조 가이드에 따르면 iPhone iOS 7/iPad 및 Apple Mail 6.5에서만 지원됩니다. – 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

그림 이모지를 CSS 테두리로 사용

답변

관련 문제