絵文字をCSSボーダーとして使用する

HTMLのニュースレターの枠として絵文字を使用する方法を探しています。かなり多く、私はクリスマスツリーemoji（）をdivの周りに繰り返すことを望みます。どのようにそれを行う上の任意のアイデアですか？絵文字をCSSボーダーとして使用する

2016-12-17 tcam27

のようなあなたのためのソリューションになりますOffice 2007以降のWindows上のデスクトップOutlookは、Trident（Internet Explorer）の代わりにWordを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ボーダーとして使用する

答えて

関連する問題