-webkit-text-stroke

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

-webkit-text-stroke は CSS のプロパティで、テキスト文字の輪郭線の幅と色を指定します。これは個別指定プロパティ -webkit-text-stroke-width および -webkit-text-stroke-color の一括指定プロパティです。

css
/* 幅と色の値 */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/* グローバル値 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

値

<length>

輪郭線の幅です。

<color>

輪郭線の色です。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承あり
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

-webkit-text-stroke = 
  <line-width>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

例

テキストに赤い輪郭線を追加

HTML

html
<p id="example">このテキストの輪郭線は赤です。</p>

CSS

css
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

結果

仕様書

Specification
Compatibility Standard
# the-webkit-text-stroke

ブラウザーの互換性

BCD tables only load in the browser

関連情報