css:text-shadow (IEではfilter:dropshadow)で文字を縁取り

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
 * { zoom: 1 } /* IE で dropshadow()使用時に必要みたい*/

.text_outline {
  color:#fff;
  /* for modern browser (firefox , chrome , safari )*/
  text-shadow: 0px -1px 0px #000,
               1px  0px 0px #000,
               0px  1px 0px #000,
              -1px  0px 0px #000;
 /* for IE */
 filter:dropshadow(color=#000000,offX= 0,offY=-1)
        dropshadow(color=#000000,offX= 1,offY= 0)
        dropshadow(color=#000000,offX= 0,offY= 1)
        dropshadow(color=#000000,offX=-1,offY= 0);
}
</style>

</head>
<body>

  <span class="text_outline" style="font-size:x-small">
    縁取りしています
  </span>
  <br><br>
  <span class="text_outline">
    縁取りしています
  </span>
  <br><br>
  <span class="text_outline" style="font-size:x-large">
    縁取りしています
  </span>

</body>
</html>

↑こう書くと、↓このように表示されます

IE

firefox

end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

関連url