CSSフォントの境界線?質問する

CSSフォントの境界線?質問する

CSS3 の新しい境界線機能 ( -webkit、...) が実装されたことで、フォントに境界線を追加できるようになりましたか? (青い Twitter ロゴの周りの実線の白い境界線のように)。できない場合は、CSS/XHTML でこれを実現する、それほど見苦しくないハックはありますか? それとも、やはり Photoshop を起動する必要がありますか?

ベストアンサー1

実験的なCSSプロパティがありますテキストストローク一部のブラウザでは -webkit プレフィックスでサポートされています

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

もう 1 つの可能なトリックは、プロパティを使用して、すべての方向にそれぞれ 1 ピクセルずつ、4 つの影を使用することですtext-shadow

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

ただし、1 ピクセルを超えるとぼやけてしまいます。

おすすめ記事