initial commit

1 files changed, 105 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/--_star_/index.html b/files/zh-cn/web/css/--_star_/index.html
new file mode 100644
index 0000000000..039eca7b94
--- /dev/null
+++ b/files/zh-cn/web/css/--_star_/index.html
@@ -0,0 +1,105 @@
+---
+title: 自定义属性 (--*)：CSS变量
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - CSS 变量
+  - CSS参考
+translation_of: Web/CSS/--*
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">带有前缀<code>--</code>的属性名，比如<code>--example--name</code>，表示的是带有值的自定义属性，其可以通过 {{cssxref("var")}} 函数在全文档范围内复用的。</p>
+
+<p>CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css"><span style='background-color: #eeeeee; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 1rem; letter-spacing: -0.00278rem; white-space: pre;'>--somekeyword: left;</span>
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+</pre>
+
+<dl>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。</dd>
+</dl>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<div>
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="firstParagraph"&gt;This paragraph should have a blue background and yellow text.&lt;/p&gt;
+&lt;p id="secondParagraph"&gt;This paragraph should have a yellow background and blue text.&lt;/p&gt;
+&lt;div id="container"&gt;
+  &lt;p id="thirdParagraph"&gt;This paragraph should have a green background and yellow text.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('示例', 500, 130)}}</p>
+</div>
+
+<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("CSS3 Variables", "#defining-variables", "--*")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="参阅">参阅</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Using CSS variables</a></li>
+</ul>