これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

構文

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

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

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

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

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

メモ: このプロパティの場合、マーカーは marker-* プロパティ (例えば marker-start) および <marker> 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は stroke および fill の順序のみが指定できます。

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;
}

結果

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
paint-order の定義
勧告候補 初回定義

初期値normal
適用対象テキスト要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 60IE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 60Opera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,