From d269b228a7d3db2aece5419b4f29253ce04e10f2 Mon Sep 17 00:00:00 2001
From: Peadar <peadar.liu@bytedance.com>
Date: Sun, 18 Apr 2021 14:06:01 +0800
Subject: 为css var()同步的内容同步英文版
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/zh-cn/web/css/var()/index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'files')

diff --git a/files/zh-cn/web/css/var()/index.html b/files/zh-cn/web/css/var()/index.html
index 281a7dcf48..f4121fa9b5 100644
--- a/files/zh-cn/web/css/var()/index.html
+++ b/files/zh-cn/web/css/var()/index.html
@@ -10,7 +10,7 @@ tags:
   - 实验性的
 translation_of: Web/CSS/var()
 ---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+<div>{{CSSRef}}</div>
 
 <h2 id="概述">概述</h2>
 
@@ -37,6 +37,8 @@ translation_of: Web/CSS/var()
 
 <h2 id="示例">示例</h2>
 
+<h3 id="Using_a_custom_property_set_on_root">在 :root 上定义，然后使用它</h3>
+
 <pre class="brush: css notranslate">:root {
   --main-bg-color: pink;
 }
@@ -46,21 +48,23 @@ body {
 }
 </pre>
 
+<h3 id="Custom_properties_with_fallbacks_for_use_when_the_property_has_not_been_set">当第一个值未定义，回退值生效</h3>
+
 <pre class="brush: css notranslate">/* 后备值 */
 
-/* 在父元素样式中 */
+/* 在父元素样式中定义一个值 */
 .component {
   --text-color: #080; /* header-color 并没有被设定 */
 }
 
-/* 在 component 的样式中： */
+/* 在 component 的样式中使用它： */
+.component .text {
+  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
+}
 .component .header {
   color: var(--header-color, blue); /* 此处 color 被回退到 blue */
 }
 
-.component .text {
-  color: var(--text-color, black);
-}
 </pre>
 
 <h2 id="规范">规范</h2>
@@ -89,5 +93,6 @@ body {
 <h2 id="另请参见">另请参见</h2>
 
 <ul>
+ <li>{{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.</li>
  <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Using CSS variables</a></li>
 </ul>
-- 
cgit v1.2.3-54-g00ecf