インラインCSSでのHTML電子メールでのテキストシャドウの使用

Question

インラインCSSでテキストシャドウ機能を使用することはできますか？私はヘッダーに境界線を付けるつもりですが、何も動作しないようです。私はこれをITチケットアプリケーションで電子メールテンプレートに書いているので、別のスタイルシートを追加することはできません。私の選択肢は限られているようです。多分私の構文が間違っていますか？

<h1 style="text-align: center"> 
 
<span style="font-family: Verdana"> 
 
<span style="text-shadow: -1px -1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, 1px 1px #ffffff"> 
 
    Service Request Created 
 
</span> 
 
</span> 
 
</h1>

私は何をしようとしていることも、可能である場合は私に知らせてください。

Answer 1

これはインラインでの問題ではありません。電子メールクライアントは多くのCSSプロパティを制限します。テキストシャドウは、すべての一般的なクライアントでは機能しません：https://www.campaignmonitor.com/css/。

解決策の1つは、テキストをイメージにすることです。

また、インラインスタイル宣言はセミコロンで終わる必要があります。

Answer 2

あなたのCSSは正しいように見え、私のために働きます。テキストは暗い背景に表示されていますか？明るい背景に白い文字の影を表示するのは難しいかもしれないからです。また、スタイルの最後に！importantを追加してみてください。また、ブラウザの要素インスペクタで、スタイルがオーバーライドされているかどうかを確認してください。

Answer 3

私のために働いた、私はちょうど影の色を変更しました。

See this fiddle

<span style="text-shadow: -1px -1px #f00, -1px 1px #f00, 1px -1px #f00, 1px 1px #f00"> 

また、電子メールクライアントにCSS3の互換性を確認するには、この記事をチェックすることができます。

https://www.campaignmonitor.com/blog/email-marketing/2010/04/css3-support-in-email-clients/

Answer 4

一つの方法は、（二重のテキストを使用している可能性に合うように影の色を調整あなたの要件）。

（あまりにも、おそらくopacity）ShaunOReilly、position: absoluteによってcommentendとして、ノートを行いますが、すべての電子メールクライアント

を更新しました

<h1 style="text-align: center"> 
 
    <span style="font-family: Verdana; position: relative"> 
 
    <span style="position: absolute; left: 2px; top: 2px; width: 100%; color: #f00; opacity: 0.5; "> 
 
     Service Request Created 
 
    </span> 
 
    <span style="position: relative"> 
 
     Service Request Created 
 
    </span> 
 
    </span> 
 
</h1>

---

ではサポートされていません。それほど長い間前私は別の方法での要素を使用してabsoluteを使用せずに配置しました。テスト済みで、どこでもどこでもテストされています。^{（ただしOutlookデスクトップ）}ですが、以下のリンク先記事は2歳であるため、今日のバージョンのOutlookデスクトップでも動作する可能性があります。

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;"> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)"> 
 
      1 
 
     </div> 
 
    </div> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)"> 
 
      2 
 
     </div> 
 
    </div> 
 
    <div style="max-height:0;max-width:0;"> 
 
     <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)"> 
 
      3 
 
     </div> 
 
    </div> 
 
</div>

のSrc：