paint-order

CSS の paint-order プロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

構文

/* 通常 */
paint-order: normal;

/* 単一の値 */
paint-order: stroke; /* 最初に輪郭、それから塗りつぶしとマーカーを描画 */
paint-order: markers; /* 最初にマーカー、それから塗りつぶしと輪郭 */

/* 複数の値 */
paint-order: stroke fill; /* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く */
paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの順に描く */

値が指定されない場合、既定の描画順序は fill, stroke, markers です。

一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。

値

normal

様々なアイテムを通常の描画順で描画します。

stroke (輪郭),
fill (塗りつぶし),
markers (マーカー)

これらの一部またはすべての値を用いて、描画したい順序を指定します。

形式文法

normal | [ fill || stroke || markers ]

例

HTML

<p>輪郭が手前</p>

<p class="stroke-behind">輪郭が背後</p>

CSS

p {
  font-family: sans-serif;
  font-size: 5rem;
  font-weight: bold;
  margin: 0;
  -webkit-text-stroke: 5px red;
}

.stroke-behind {
  paint-order: stroke fill;
}

結果

仕様書

ブラウザーの対応