---
title: paint-order
slug: Web/CSS/paint-order
translation_of: Web/CSS/paint-order
---
<div>{{CSSRef}}{{seecompattable}}</div>

<p><a href="/en-US/docs/Web/CSS">CSS</a>  <strong><code>paint-order</code></strong>  属性可以让你控制文本区域和图形绘制的填充和绘制（和markers）的顺序</p>

<h2 id="语法">语法</h2>

<pre class="brush: css no-line-numbers">/*默认 */
paint-order: normal;

/* 单一属性 */
paint-order: stroke; /* 先描边, 然后填充,markers*/
paint-order: markers; /* 先绘制markers, 然后填充，描边 */

/* 多属性 */
paint-order: stroke fill; /* 先描边，然后填充，然后markers */
paint-order: markers stroke fill; /* 先 markers, 然后 stroke, 然后 fill */

</pre>

<p>如果没有指定值，默认顺序将是 <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>

<p>当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。</p>

<div class="note">
<p>注意：在这个属性的值当中，markers 只有当在绘制SVG图形时引用了 <code>marker-*</code>属性（例如 <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>）和 <code><a href="/en-US/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code> 元素才能进行控制。他们不适用于HTML文本，所以，这样的话，你只能决定  <code>stroke</code> 和 <code>fill </code>的顺序。</p>
</div>

<h3 id="属性值">属性值</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>用正常的顺序渲染不同的元素</dd>
 <dt><code>stroke</code>,<br>
 <code>fill</code>,</dt>
 <dt><code>markers</code></dt>
 <dd>指定一部分或者全部这些属性的渲染顺序</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

{{csssyntax}}

<h2 id="使用示例">使用示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Stroke in front&lt;/p&gt;

&lt;p class="stroke-behind"&gt;Stroke behind&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: 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;
}</pre>

<h3 id="效果">效果</h3>

<p>{{EmbedLiveSample('Examples', '100%', 165)}}</p>

<h2 id="说明">说明</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("css.properties.paint-order")}}</p>