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 ピクセルを超えるとぼやけてしまいます。