web-dev-qa-db-ja.com

cssを使用したテキスト枠（テキストの周囲の枠）

下の画像のようにテキストの周囲に境界線を統合する方法はありますか？

text border

csstextcss3
95
jho1086

複数のテキストの影を使う：

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;

enter image description here

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;

enter image description here

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

CSSのトリックとしても もっと読む 。

195
bookcasey

もちろんです。あなたはCSS3 text-shadowを使うことができます：

text-shadow: 0 0 2px #fff;

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

13
jtheman
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
6
chezwhite

以下は、カバーする価値のあるすべてのブラウザについて説明します。

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 */
5
dtbarne
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>
0
Ali Asgher Badshah