5

私は新しいテキストストローク機能を試していますが、クロスブラウザソリューションをWebで検索しました。今のところ、私はそれをwebkitプロパティでしか見つけることができませんでした。

-webkit-text-stroke: 2px #FF1E00;

すべてのブラウザが同じように表示されるようにする方法があるかどうか教えてください。

4

4 に答える 4

5

2012年5月24日の時点では、 http： //caniuse.com/#search=text-strokeによると、ウェブキットのみが実験的な機能をサポートしているため、クロスブラウザソリューションはありません。text-shadowこれは、要素の4または5で（ある程度）シミュレートできます。

デモ：CSS-Tricks.comのテキストストローク

于 2012-05-24T16:13:39.750 に答える
0

これはクロスブラウザーでネイティブに実行することはできませんが、サポートされていないブラウザーのフォールバックを使用して実装できます。

color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;

そうすれば、Webkit ブラウザーは白いテキストと青い枠線を表示しますが、他のブラウザーは選択した色 (この場合は青) を表示します。

于 2019-08-28T21:36:14.337 に答える
0

バニラの JavaScript プラグインであるstrokeText.jsを試すことができます。

  • ストロークはテキストと重ならない -webkit-text-stroke
  • IE8以下を除くすべてのブラウザをサポート
  • 選択可能なテキスト
  • 依存関係なし

完全な開示、プラグインを作成しました。

于 2017-12-11T20:14:58.017 に答える