3px以上のクリアな縁取りをCSS Text-shadowのみで実現する方法

なんだか難しいようで実現して解説しているページが無いようなので、
簡単な方法を紹介します。
以下のようになります。

4pxの場合

3pxの場合

御託はいいから、どうやるんだよって人のために
答えから書きます（＾＾）

3pxのtest-shadowの指定は以下です

みたらすぐわかると思いますが、解説してみます

縁取り幅の　最大から最小までのシャドウを四方につけるという単純なもので
解説のしようもないほど簡単です。

分解してみると

x=-3～3　y=-3

 

 

x=-3　y=-3～3

 

x=-3～3　y=3

 

x=3　y=-3～3

 

合体すると

以上ですが、他のページでは　3ピクセルのぼかしを重ねるとかの方法で実現してるページもありますが
クリアな感じではありません。

text-strokeやsvg などを使う方法もあるみたいですが、CSSだけでないため対応ブラウザが制限されるなど制約があります。

上記の方法は完全にCSSのtext-shadowのみで実現しているためほとんどのブラウザに対応しています。

記述も　-3～3までをシーケンシャルに記述すればいいのでわかりやすいと思います
ぜひご活用ください。