text - css を使用したテキストの境界線 (テキストの境界線)

Question

下の画像のようにテキストの周りにボーダーを統合する方法はありますか?

Answer 1

複数のテキスト シャドウを使用する:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

別の方法として、Webkit でのみ機能するテキスト ストロークを使用することもできます。

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

CSS-Tricks としてもお読みください。

Answer 2

もちろん。CSS3 を使用できますtext-shadow:

text-shadow: 0 0 2px #fff;

ただし、すべてのブラウザですぐに表示されるわけではありません。ただし、 Modernizrのようなスクリプト ライブラリを使用すると、ほとんどのブラウザーで正しく動作するようになります。

Answer 3

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Answer 4

以下は、カバーする価値のあるすべてのブラウザーをカバーします。

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */