129

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

テキスト枠

4

5 に答える 5

266

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

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 としてもお読みください。

于 2012-11-17T03:05:53.233 に答える
18

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

text-shadow: 0 0 2px #fff;

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

于 2012-11-17T01:58:17.580 に答える
7 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
于 2015-05-28T10:22:18.233 に答える
5

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

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 */
于 2012-11-17T02:10:48.923 に答える