javascript - css/html/javascript のテキストに境界線を追加するにはどうすればよいですか

Question

問題があります。html、css、または javascript を使用してテキストに境界線を追加したいのです。境界線のサイズは 10px にする必要があります。これは可能ですか？

したがって、次のようになります。

お役に立てれば幸いです。

よろしくクリス

Answer 1

前述のとおり、 でこれを試すこともできますが、text-shadowお勧めしません。Ankit のソリューションを編集したのは、エイリアスのように見えたからです。

http://jsfiddle.net/ZnfED/1409/

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

Eric Brockman が言うように、 を使用できますtext-strokeが、これは現在、ほとんどのブラウザーでサポートされていません。ただし、-webkit-プレフィックス付きのブラウザーで動作します。

フィドルの例を次に示します: http://jsfiddle.net/ZnfED/1410/

   -webkit-text-fill-color: white;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;

CSS の順序に関係なく、-webkit-text-fill-colorは常に上書きされることに注意してください。color

Answer 2

これをスタイルシートに追加してみてください。

h1 {
   color: black;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

このオプションの詳細については、http：//css-tricks.com/adding-stroke-to-web-text/をご覧ください。

Answer 3

実験的な機能に頼る代わりに、投稿したもののように見える透明な .PNG 画像を作成divし、必要なテキストと幅で を作成してから、CSSでtext-indentプロパティを設定することをお勧めします。background プロパティを使用して-9999px、PNG 画像を背景として設定します。ハックdivの使用に成功します。-9999px

ここを参照してください: http://www.dennisplucinik.com/blog/2007/09/01/css-hack-text-indent-10000px/これは、Apple が Web サイトで美しいタイポグラフィを作成するために使用するものです。

Answer 4

多くの影が必要です。影の数が多いほど効果が高くなります

{
    font-size:80px;
    color: green;
   text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

これを示すリンクは次のとおりです：http://jsfiddle.net/ZnfED/1408/ text-shadow プロパティの他の値を使用して、影の幅を増減できます（4pxを使用しました）

注 : これは少数のブラウザでのみサポートされています

ブラウザの互換性を気にする必要がないため、これの代わりに画像を使用することをお勧めします