10

テキストにストロークとシャドウを追加する方法があるかどうか疑問に思っていました.Webkitはテキストストロークとテキストシャドウをサポートしているため、ChromeとSafariで動作させることができます. ストロークを Firefox に表示することはできますが、それは text-shadow を使用してオフセットをいじっています。では、この問題を回避する方法を知っている人はいますか?

4

2 に答える 2

20

このtext-strokeプロパティは標準の CSS 仕様の一部ではないため、避けるのが最善です。Chrome には、いつでもそれを引き出す権利があります。

text-stroke複数のコンマ区切り を使用して のような効果を作成できることは正しいです。text-shadow実際、同じ手法を使用して「実際の」影を追加することもできます。

h1 {
  font-size: 6em;
  font-weight: bold;
  text-shadow: 1px  1px 0   #F00,
              -1px -1px 0   #F00,
               1px -1px 0   #F00,
              -1px  1px 0   #F00,
               3px  3px 5px #333;
}
<h1 style="margin:0">Hello World</h1>

text-shadowただし、 IE9以下でもサポートされていないため、注意してください。必須ではないスタイリングにのみ使用することをお勧めします。影/偽のアウトラインが存在しない場合でも、テキストが同じように読みやすいことを確認してください。

于 2012-05-25T20:24:07.290 に答える
4

Firefox 48 では、テキスト ストローク (接頭辞付き) と、-webkitその他の Webkit 固有のプロパティ ( など-webkit-text-fill-color) がサポートされるようになりました。仕様は実際には存在しないことに注意してください。将来変更される可能性があります。

Firefox で動作するようになった例を次に示します。

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}
<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>

Mozilla の Web サイトを参照してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

于 2016-06-18T15:37:27.680 に答える