CSSを使用したテキストの境界線（テキストの周囲の境界線）
回答:
複数のテキストシャドウを使用する：
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としても読んでください。
注目に値する：これらのメソッドのクロスブラウザ機能をテストしてください... IEでクライアントに深刻な問題が発生しています。PNGの方法を考えています。
—
ErickBest
@ErickBest 2番目のリンクはIE9の問題について言及しています。このページはgoogle caniuse.com/css-textshadowで
—
AnnanFay
（rgbaを使用して）透過性のあるテキストの表示が不適切になります。
—
Alejandro Nava
承知しました。CSS3を使用できますtext-shadow。
text-shadow: 0 0 2px #fff;ただし、すべてのブラウザですぐに表示されるわけではありません。ただし、Modernizrのようなスクリプトライブラリを使用すると、ほとんどのブラウザで正しく機能します。
私はすでにそのサーを試しましたが、私が必要なのはテキストの周りの無地の白です。
—
jho1086
テキストシャドウの乗算に基づくそれほど多くのソリューションは好きではありません。これは実際には柔軟性がなく、追加する方向が8である2ピクセルのストロークで機能する可能性がありますが、ストロークの方向が3ピクセルだけの場合は16になります。 。管理が本当に快適ではない。
適切なツールが存在します。それはSVGです<text>
。この場合、ブラウザのサポートの問題は何の価値もありません。テキストシャドウの使用にも独自のサポートの問題があるため、
filter: progid:DXImageTransform使用できるか、IE <10ですが、期待どおりに機能しないことがよくあります。
私にとって最良の解決策は、古いブラウザのストロークされていないテキストのフォールバックを備えたSVGのままです。
この種のアプローチは、ChromeおよびFirefoxのすべてのバージョン、バージョン3.04以降のSafari、Opera 8、IE 9で実質的に機能します。
text-shadowChrome 4.0、FF 3.5、IE 10、Safari 4.0、Opera 9のサポートと比較すると、さらに互換性があります。
.stroke {
margin: 0;
font-family: arial;
font-size:70px;
font-weight: bold;
}
svg {
display: block;
}
text {
fill: black;
stroke: red;
stroke-width: 3;
}<p class="stroke">
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
<text x="0" y="70">Stroked text</text>
</svg>
</p>
ソリューションを共有していただきありがとうございます。あなたの権利はもっと柔軟だと思います。しかし、ほとんどの場合、CSSを使用する方が効率的です。後でSVGを使用してみます。
—
jho1086