initial commit

1 files changed, 99 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/paint-order/index.html b/files/zh-cn/web/css/paint-order/index.html
new file mode 100644
index 0000000000..4683868cb1
--- /dev/null
+++ b/files/zh-cn/web/css/paint-order/index.html
@@ -0,0 +1,99 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>
+
+<div class="hidden">本页的兼容性表是以结构化数据来保证的 ，如果你想贡献数据, 请访问<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且给我们发一个pull request</div>
+
+<p>{{Compat("css.properties.paint-order")}}</p>