CSS3

：

プロパティ

：

-webkit-text-stroke

　編集：2022.07.14 by T.A.

[Edge]非標準。→●、mdn

テキストストローク（縁取り）：略式プロパティ。

名前	`-webkit-text-stroke`
値	<line-width> \|\| <color>
初期値	個々のプロパティを見よ
適用対象	個々のプロパティを見よ
継承	される
百分率	受容しない
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

要素のテキストの［ストローク幅、ストローク色］を一括して設定するための略式プロパティである。

<line-width> ○

＝<length[0,∞]>
| thin
| medium
| thick

縁取りの輪郭の太さ。

<SPAN style="font-size:30px;
 -webkit-text-stroke:thick red;
">●テスト</SPAN><BR>

<color> ●

縁取りの輪郭の色。

<SPAN style="font-size:30px;
 -webkit-text-stroke:2px black;
">●テスト</SPAN><BR>

白くフィルされるテキストに黒くストロークする（縁取りする）効果を達成する 2 つの例を示す。最初の例では下位プロパティを利用し、2 番目の例では -webkit-text-stroke 略式プロパティを利用して、同じ結果を得る：

.stroked-text-longhand {
  color: #fff;
  -webkit-text-stroke-color: #000;
  -webkit-text-stroke-width: 1px;
}

.stroked-text-shorthand {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: thin #000;
}

これにより、次の要素は：

<p class="stroked-text-longhand">Serious typography</p>

次のように描画されることになる：

スクリプト：

スクリプト：

CSS3

プロパティ

-webkit-text-stroke

関連

テスト