FirefoxでもCSSで縁取り文字を表示する方法

 Firefoxても、CSSのtext-shadowを使って、縁取り文字を表示する方法です。

まずwebkit系(chrome,safari）ならstrokeの記述を書けばOKです。

h1 {
   color: black;
   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
  color: white;
}

でも、Firefoxだとうまく表示できない（白い文字が表示されるだけ）ので、text-shadowを使ってこんなふうに書くと…

h1 {
    color: white;
      text-shadow:
       -1px -1px 0 #000,
        1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
}

Firefoxでも表示できる縁取り文字になりました。

さらに、これに影をつけることもできます。

h1 {
   -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

もちろんコレもFirefoxで表示されます。IEはシラ（ｒｙ

ネタ元では、さらにこれをアニメーションさせる例も有りました。

＞＞Adding Stroke to Web Text | CSS-Tricks