Emmet: 渐变与 CSS 实战：lg() rg() 一行写完 webkit/moz/o 兼容渐变
第 11-12 课你学会了 CSS 简写的核心机制——单位推导、显式单位、多值、颜色、供应商前缀、模糊匹配。但 CSS3 最复杂的特性——渐变还没讲。渐变是 CSS3 中重复劳动最严重的属性：光一个
linear-gradient就要写-webkit-+-moz-+-o-+ 标准 4 行兼容写法，每行的参数语法还分"旧版 webkit""现行规范""W3C 提案"3 种。本课教 Emmet 的 CSS3 渐变生成器——lg(...)一行展开 4 行兼容 + 3 种语法版本，并组合前 2 课的所有机制，写一个完整的按钮样式实战。
1. 你将学到
lg(...)线性渐变简写：自动展开 4 行兼容（webkit + moz + o + 标准），覆盖 3 种语法版本- 渐变方向参数：
lg(left, #fff, #000)与lg(top, #fff, #000) - 多色停止点：
lg(#fff, #ccc 50%, #000)中50%是#ccc的位置 rg(...)径向渐变：与lg(...)同结构，默认从中心向外- 综合实战：按钮样式 7 个属性（
bgc+c+p+bdrs+tdn+fz+fw）一行写完
2. 一个前端开发者的真实故事
(1) 痛点：CSS 渐变兼容写法 + 按钮样式，写到崩溃
Alice 在做 SaaS 产品落地页的"立即注册"按钮。她想要按钮背景是白色到浅灰色的线性渐变——视觉上比纯色背景更高级。她先 Google 搜索"linear-gradient 兼容性写法"，复制粘贴得到：
CSS
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
4 行兼容性写法，每行参数还略有不同（webkit/moz/o 用 left，标准用 to right）。她要把这一段抄 5 次（主按钮、次按钮、悬停态、激活态、禁用态），每次还要修改颜色值。光这段渐变代码就 20 行 + 5 次复制粘贴 = 100 行。
更要命的是按钮还要写完整的样式：背景渐变（4 行）+ 文字色（1 行）+ 内边距（1 行）+ 圆角（1 行）+ 文字装饰清除（1 行）+ 字号（1 行）+ 字重（1 行）+ 鼠标光标（1 行）= 11 行。Alice 写完整个按钮 CSS 用了 15 分钟。她心想：CSS3 渐变是设计师常用的效果，能不能像 HTML 一样"几个字母 + 几个值 + Tab"展开成完整的 4 行兼容写法？
(2) Emmet 渐变生成器的解法
Emmet 提供CSS3 渐变生成器——lg(...)（linear gradient）和 rg(...)（radial gradient）。你只需要在括号内写"普通渐变定义"（方向 + 颜色停止点），Emmet 自动展开为 4 行兼容写法，覆盖 webkit/moz/o + 标准 3 种语法版本。
Alice 的渐变按钮简写：
CSS
lg(left,#fff,#f0f0f0)
一行展开 4 行兼容 + 颜色停止点位置参数自动处理。光这一段就让她从 20 行降到 1 行简写。
按钮样式综合实战，Alice 把按钮的 7 个属性用一行写完：
TEXT
📖 仅展示
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
一行 47 字符，按 7 次 Tab，11 行完整按钮 CSS 在 12 秒内完成。原本 15 分钟的工作降到 12 秒，速度提升 75 倍。
(3) 收益
CSS3 渐变生成器 + CSS 简写综合实战是 Emmet 在样式编写场景的终极武器。前者解决"4 行兼容写法 + 3 种语法版本"的重复劳动，后者把按钮、卡片、表单等常见 UI 组件的样式压缩到 1 行。学完本课，Alice 的按钮样式从 15 分钟降到 12 秒，渐变兼容代码从 20 行降到 1 行简写。本课也是 Phase 4 的收官——下一阶段（Phase 5）将进入编辑器 Actions，把 Emmet 从"输入简写"扩展到"编辑加速"。
3. CSS3 渐变生成器的核心定义
CSS3 渐变是设计师最爱的视觉效果之一，但兼容性写法极其繁琐——光一个 linear-gradient 就要为 webkit/moz/o 写 3 个前缀版本，参数语法还分"旧版 webkit""现行规范""W3C 提案"3 种。
Emmet 提供 lg(...) 和 rg(...) 两个渐变生成器关键字，自动展开 4 行兼容写法，覆盖 3 种语法版本。
graph TB
A[lg 渐变简写] --> B[lg 线性渐变]
A --> C[rg 径向渐变]
B --> B1[lg direction? + colors + stops]
B1 --> B2[direction 可选: left/right/top/bottom]
B1 --> B3[color stops: #fff, #ccc 50%, #000]
C --> C1[rg + colors + stops]
C1 --> C2[默认从中心向外]
D[展开: 4 行兼容] --> D1[-webkit-linear-gradient]
D --> D2[-moz-linear-gradient]
D --> D3[-o-linear-gradient]
D --> D4[linear-gradient to 版]
B -.-> D
C -.-> D
style A fill:#3b82f6,color:#fff
style B fill:#10b981,color:#fff
style C fill:#8b5cf6,color:#fff
style D fill:#ef4444,color:#fff
style D1 fill:#fef3c7
style D2 fill:#fef3c7
style D3 fill:#fef3c7
style D4 fill:#fef3c7
💡 提示： Emmet 的渐变简写作为 CSS 属性值使用——通常写在
background 或 background-image 简写里（如 bg:lg(...)、bgc:lg(...)），也可以直接写在简写上下文（如单独一行 lg(...)）。如果想作为属性值使用，Emmet 会智能继承当前行的属性名（详见 bg+ 字符简写）。
4. 线性渐变 lg(...)：方向 + 颜色停止点
lg(...) 是 linear-gradient(...) 的简写，参数结构是 lg(direction?, color stops...)。
(1) 基础线性渐变：方向默认
省略方向参数时，Emmet 默认从上到下渐变。
| 简写 | 展开关键内容 | 说明 |
|---|---|---|
lg(#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);-moz-linear-gradient(top, #fff, #000);-o-linear-gradient(top, #fff, #000);linear-gradient(to bottom, #fff, #000); |
上下渐变（默认） |
lg(#fc0,red) |
同结构，颜色为 #ffcc00 和 red |
任意颜色 |
lg(#fff,#ccc,#000) |
三色渐变 | 默认等距分布 |
(2) 渐变方向参数
方向参数是 lg(...) 的第一个可选参数，使用 CSS 关键字（left、right、top、bottom）。
| 简写 | 展开关键内容 | 方向 |
|---|---|---|
lg(left,#fff,#000) |
-webkit-linear-gradient(left, #fff, #000);... linear-gradient(to right, #fff, #000); |
从左到右 |
lg(right,#fff,#000) |
-webkit-linear-gradient(right, #fff, #000);... linear-gradient(to left, #fff, #000); |
从右到左 |
lg(top,#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);... linear-gradient(to bottom, #fff, #000); |
从上到下 |
lg(bottom,#fff,#000) |
-webkit-linear-gradient(bottom, #fff, #000);... linear-gradient(to top, #fff, #000); |
从下到上 |
📌 重点： 旧版 webkit/moz/o 使用起点方向（
left = 从左开始），标准版使用终点方向（to right = 终点在右 = 从左到右）。Emmet 自动处理这种双向转换——你只需要写起点方向（left），Emmet 自动给标准版加 to right。
(3) 多色停止点 + 位置参数
每个颜色停止点可以跟一个位置参数（0% 到 100%），控制颜色在渐变中的位置。
| 简写 | 展开关键内容 | 说明 |
|---|---|---|
lg(#fff,#000) |
等距分布（默认 0% 和 100%） | 2 色基础 |
lg(#fff,#ccc 50%,#000) |
-webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);... linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%); |
3 色 + 中间色 50% |
lg(left,#fc0 30%,red) |
... linear-gradient(to right, #fc0 30%, red 100%); |
30% 处变橙 |
lg(#fff 0%,#ccc 25%,#000 75%) |
三色自定义位置 | 完全控制位置 |
💡 提示： 颜色停止点的位置参数是可选的——省略时浏览器自动等距分配。但精确控制（如"30% 处突然变色"）必须显式写位置。位置参数和颜色之间用空格分隔（不是连字符），因为连字符会被 Emmet 解析为值分隔符。
5. 径向渐变 rg(...)：从中心向外
rg(...) 是 radial-gradient(...) 的简写，结构与 lg(...) 类似但默认从中心向外渐变（径向）。
(1) 基础径向渐变
| 简写 | 展开关键内容 | 说明 |
|---|---|---|
rg(#fff,#000) |
-webkit-radial-gradient(center, #fff, #000);-moz-radial-gradient(center, #fff, #000);-o-radial-gradient(center, #fff, #000);radial-gradient(circle at center, #fff, #000); |
从中心向外 |
rg(#fc0,#f00) |
同结构，橙到红 | 径向高亮效果 |
(2) 径向渐变形状与位置
径向渐变支持更复杂的形状参数（circle、ellipse）和位置参数（top left、center）。
| 简写 | 展开关键内容 | 说明 |
|---|---|---|
rg(circle,#fff,#000) |
圆形径向 | 默认形状 |
rg(ellipse,#fff,#000) |
椭圆径向 | 椭圆形状 |
rg(circle at top left,#fff,#000) |
圆形在左上角 | 自定义位置 |
⚠️ 注意： 径向渐变的复杂参数（
circle、ellipse、at）可能在不同 Emmet 版本中支持略有差异。基础 2 色径向（rg(#fff,#000)）兼容性最好；复杂参数建议先在编辑器中测试。
6. 实战示例
下面 5 个示例覆盖渐变生成器 + CSS 简写综合实战的核心场景。
▶ 示例：基础线性渐变 lg(#fff,#000)（难度⭐）
最常用的渐变——白色到黑色从上到下，4 行兼容 + 3 种语法。
缩写：
CSS
lg(#fff,#000)
展开：
CSS
background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #000 100%);
输出：
TEXT 📖 仅展示解析：`lg(#fff,#000)` 中 `lg` 是 `linear-gradient` 的简写关键字，`#fff` 和 `#000` 是两个颜色停止点（Emmet 自动分配 0% 和 100% 位置）。Emmet 展开为 4 行兼容写法：① `-webkit-linear-gradient`（Chrome、Safari 旧版）；② `-moz-linear-gradient`（Firefox 旧版）；③ `-o-linear-gradient`（Opera 旧版，已废弃）；④ 标准 `linear-gradient`（W3C 提案版，使用 `to bottom` 替代 `top`）。4 行写法覆盖 2010-2026 年所有浏览器的渐变语法。注意：Emmet 把简写 `lg(...)` 默认作为 `background` 属性的值（也支持 `background-image`）。
▶ 示例：渐变方向 lg(left,#fff,#000)（难度⭐⭐）
横向渐变——从左到右，验证方向参数的双向转换。
缩写：
CSS
lg(left,#fff,#000)
展开：
CSS
background: -webkit-linear-gradient(left, #fff 0%, #000 100%);
background: -moz-linear-gradient(left, #fff 0%, #000 100%);
background: -o-linear-gradient(left, #fff 0%, #000 100%);
background: linear-gradient(to right, #fff 0%, #000 100%);
输出：
TEXT 📖 仅展示解析：`left` 是方向参数——在 webkit/moz/o 旧版中表示"起点在左"（从左到右渐变）；在标准版中需要转换为 `to right`（终点在右 = 从左到右）。Emmet 自动处理这种**起点 vs 终点的语义转换**——你只需要写起点方向（`left`、`right`、`top`、`bottom`），Emmet 给标准版加 `to` 前缀并镜像方向。这种设计让你不用关心版本差异。4 行展开后，浏览器渲染一个从左白色到右黑色的水平渐变背景。
▶ 示例：多色停止 lg(#fff,#ccc 50%,#000)（难度⭐⭐）
3 色渐变 + 自定义中间色位置——精确控制颜色过渡点。
缩写：
CSS
lg(#fff,#ccc 50%,#000)
展开：
CSS
background: -webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%);
输出：
TEXT 📖 仅展示解析：3 色渐变 `#fff,#ccc 50%,#000` 中，`#fff` 是起始色（自动 0%），`#ccc 50%` 是中间色（**显式指定 50% 位置**），`#000` 是结束色（自动 100%）。`#ccc` 后面的 `50%` 是**位置参数**——控制 `#ccc` 在渐变中的位置。位置参数和颜色之间用**空格**分隔（不是 `-`），因为 `-` 在 Emmet CSS 简写中已经是值分隔符。展开后浏览器渲染一个三段渐变：上 0% 是纯白，中间 50% 是浅灰，下 100% 是纯黑。颜色停止点位置是设计师精细控制渐变效果的核心——比如"按钮按下时中间突然变色"必须用显式位置。
▶ 示例：径向渐变 rg(#fff,#000)（难度⭐）
径向渐变——从中心向外的圆形渐变，适合高光、聚光效果。
缩写：
CSS
rg(#fff,#000)
展开：
CSS
background: -webkit-radial-gradient(center, #fff 0%, #000 100%);
background: -moz-radial-gradient(center, #fff 0%, #000 100%);
background: -o-radial-gradient(center, #fff 0%, #000 100%);
background: radial-gradient(circle at center, #fff 0%, #000 100%);
输出：
TEXT 📖 仅展示解析：`rg(...)` 是 `radial-gradient(...)` 的简写关键字，结构与 `lg(...)` 类似但**默认从中心向外**渐变。`#fff` 和 `#000` 是两个颜色停止点。Emmet 展开为 4 行兼容写法：① `-webkit-radial-gradient(center, ...)`（旧版 webkit）；② `-moz-radial-gradient`；③ `-o-radial-gradient`；④ 标准 `radial-gradient(circle at center, ...)`（使用 `circle at center` 表示圆形径向在中心）。径向渐变常用于聚光、高光、阴影替代等视觉效果——比如卡片悬停时的"光斑"、图片的"暗角"边框。
▶ 示例：按钮样式完整实战（难度⭐⭐）
综合实战——把第 11-13 课所有 CSS 简写机制（单位推导、颜色、!、模糊匹配）组合起来，写一个完整的按钮样式。
缩写：
CSS
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
展开：
CSS
background-color: #2c3e50;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
输出：
TEXT 📖 仅展示解析：7 个独立简写一行写完，覆盖按钮的完整样式——`bgc#2c3e50` 背景色深蓝灰（`#2c3e50` 是 6 位颜色保持不变）；`c#fff` 文字色白色（`#fff` 自动扩展为 `#ffffff`）；`p10-20` 内边距上下 10 左右 20；`bdrs4` 圆角 4 像素；`tdn` 通过模糊匹配到 `text-decoration: none`（清除下划线）；`fz16` 字号 16 像素（`fz` 是 font-size 简写）；`fw700` 字重 700（`fw` 是 font-weight 简写，700 是粗体）。整段简写 47 字符，展开为 7 行完整 CSS。从手写 7 行 × 平均 18 字符 = 126 字符 + 7 次 Tab + 7 次分号检查，到 47 字符 1 行搞定。Emmet CSS 简写把"键盘敲击量"降低 60%，加上渐变简写的 4 行兼容写法，整体效率提升 70-80 倍。
7. 完整示例：渐变按钮 + hover 效果
把渐变生成器 + CSS 简写综合 + 模糊匹配全部组合起来——一个完整的"渐变按钮 + hover 效果"。
▶ 示例：渐变按钮完整样式（难度⭐⭐⭐）
缩写：
CSS
.bg:lg(left,#fff,#f0f0f0) c#333 p10-20 bdrs4 tdn fz16 fw700 curp
展开：
CSS
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
color: #333333;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
输出：
TEXT 📖 仅展示解析：本例是 Phase 4 收官的完整综合——同时调用了渐变生成器（`lg(left,#fff,#f0f0f0)` 展开 4 行兼容）、单位推导（`p10-20` 自动加 px、`bdrs4` 自动加 px）、颜色自动扩展（`c#333` 3 位 → 6 位）、模糊匹配（`tdn` → text-decoration: none）、单字母属性简写（`fz` font-size、`fw` font-weight、`curp` cursor: pointer）。一行 60 字符简写展开为 11 行完整 CSS（4 行渐变 + 7 行基础样式）。这种"渐变按钮"是 SaaS 落地页、产品官网最常见的 UI 组件——把它的样式压缩到 1 行 Emmet 简写，是 Emmet 在 CSS 场景的终极形态。整段简写让开发者从手写 11 行 × 平均 22 字符 = 242 字符 + 11 次 Tab + 11 次分号检查，到 60 字符 1 行搞定。如果配合第 12 课的供应商前缀机制（`-bdrs4`），还能再补 2 行 webkit/moz 兼容圆角——但现代浏览器基本都支持 `border-radius`，实际开发中通常省略。
❓ 常见问题
Q
lg(...) 简写只展开 4 行兼容吗？能精简到 2 行吗？A 默认展开 4 行。Emmet 没有提供"只输出标准版"的开关——这是有意设计，让 CSS3 渐变在所有浏览器（包括旧版）都能正常工作。如果你只关心现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge），可以手动删除 webkit/moz/o 3 行，只保留标准版。但删除前要确认目标用户群体的浏览器分布。
Q
lg(...) 默认渐变方向是什么？能省略方向吗？A 默认
top（从上到下）。lg(#fff,#000) 省略方向时展开为 linear-gradient(top, ...)（旧版）或 linear-gradient(to bottom, ...)（标准版），都是上下渐变。如果想要其他方向，必须显式写：lg(left,...)、lg(right,...)、lg(bottom,...)。Q
bg+ 这个字符简写是什么意思？和 bgc 有什么区别？A
bg+ 是 Emmet 的 background 扩展简写——+ 表示"带默认 placeholder 值"，展开为带 url() 默认值的 background 简写（适合图片背景场景）。bgc 只是 background-color，只处理背景色。bg+ 和 bgi（background-image）配合 lg(...) 渐变使用更常见：bgi:lg(left,#fff,#000) 展开为完整的渐变背景图。实际开发中推荐用 bg + lg(...) 组合。Q 渐变简写里能用
transparent（透明）颜色吗？A 能，但需要用完整字符串：
lg(#fff,transparent,#000) 展开为以 #fff 开头、透明中间、#000 结束的 3 色渐变。transparent 是 CSS 标准关键字，Emmet 原样输出。如果想用 rgba 透明色，可以用 rgba() 函数：lg(rgba(255,255,255,0),#000)，但 Emmet 对 rgba() 内的函数调用支持有限，建议先用 hex 颜色（如 #fff0）或 #fff00（4 位颜色，最后两位是 alpha）。📖 小节
lg(...)线性渐变简写：自动展开 4 行兼容（webkit + moz + o + 标准 W3C 提案版）rg(...)径向渐变简写：与lg(...)同结构，默认从中心向外（圆形circle at center）- 渐变方向：
left/right/top/bottom作为第一个参数，旧版用起点方向，标准版自动加to前缀镜像 - 多色停止点：
color + 空格 + position%精确控制颜色位置（#ccc 50%表示#ccc在 50% 位置） - 完整按钮样式：7 个属性一行写完（
bgc+c+p+bdrs+tdn+fz+fw），覆盖背景/文字/边距/圆角/装饰/字号/字重 - 综合实战：渐变按钮 + hover 效果用一行 Emmet 简写搞定 11 行 CSS
📝 作业
- 基础题（难度⭐）：在
.css文件中分别输入lg(#fff,#000)、lg(#fc0,red)、rg(#fff,#000)3 个渐变简写，按 Tab 后记录展开结果（每个应该展开 4 行兼容写法）。统计 3 次展开的总行数，并验证每行是否都有正确的浏览器前缀（webkit/moz/o + 标准）。 - 进阶题（难度⭐⭐）：用一行 Emmet 简写写出一个带渐变背景的按钮样式（至少 8 个属性），要求：(a) 渐变背景用
bg:lg(left,#fff,#f0f0f0)或bgi:lg(top,#3b82f6,#1e40af)（蓝色渐变）；(b) 文字色白色c#fff；(c) 内边距 10-20；(d) 圆角 6px；(e) 文字装饰清除；(f) 字号 16px；(g) 字重 600；(h) 鼠标光标curp（curp是 cursor: pointer 的简写）。验证展开结果，并说明为什么 8 个属性之间用空格分隔（不能用连字符）。 - 挑战题（难度⭐⭐⭐）：编写一个完整的"卡片 + 渐变 + hover 过渡"CSS 样式（至少 10 个属性），要求：(a) 渐变背景（
bg:lg4 行兼容）；(b) 圆角 8px；(c) 阴影（bxs模糊匹配）；(d) 内边距 16-20；(e) 文字色深灰；(f) 字号 14px；(g)transition过渡用单字母简写（trs或-trs）；(h)cursor: pointer鼠标光标；(i) 至少 1 个属性用模糊匹配；(j) 至少 1 个属性末尾加!important。用一行 Emmet 简写写完，记录展开结果（预计 15-20 行 CSS），并写一份"渐变 + CSS 简写综合实战"vs 手写 CSS 的速度对比报告。
