下の画像のように、テキストの周りにボーダーを組み込むことはできますか?
.
複数のテキストシャドウを使う
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でのみ動作するtext strokeを使用することもできます。
-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; }
CSS-Tricksとして続きを読むもあります。
もちろん、CSS3の text-shadow を使うこともできます。
text-shadow
text-shadow: 0 0 2px #fff;
しかし、すべてのブラウザですぐには表示されません。Modernizr](http://modernizr.com/)のようなスクリプトライブラリを使用すると、ほとんどのブラウザで正しく表示されるようになります。
以下は、カバーする価値のあるすべてのブラウザをカバーします。
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
複数のテキストシャドウを使う
または、webkitでのみ動作するtext strokeを使用することもできます。
CSS-Tricksとして続きを読むもあります。
もちろん、CSS3の
text-shadow
を使うこともできます。しかし、すべてのブラウザですぐには表示されません。Modernizr](http://modernizr.com/)のようなスクリプトライブラリを使用すると、ほとんどのブラウザで正しく表示されるようになります。
以下は、カバーする価値のあるすべてのブラウザをカバーします。