CSS3 新增文本属性与CSS3 渐变（Day13 3/4）

本页对应 Day13_CSS3，共 6 段视频，约 1 小时 2 分。

学习目标

1. 能使用 text-decoration-line、text-decoration-style、text-decoration-color 及 text-decoration 复合属性，为文本设置指定类型、风格和颜色的修饰线。
2. 能使用 overflow-wrap: break-word 允许长单词在单词内部断行，并说明其与默认值 normal 的显示差异。
3. 能使用 white-space 的 normal、pre、pre-wrap、pre-line、nowrap 等值控制空格、换行符和自动换行的显示格式。
4. 能按“强制单行、隐藏溢出、显示省略号”三步实现长文本单行溢出显示省略号，并正确书写 white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
5. 能使用 text-shadow 设置文本阴影的偏移、模糊值和颜色，并能通过逗号分隔多个阴影实现描边、立体等效果。
6. 能使用 linear-gradient() 设置渐变方向或角度、颜色列表及颜色位置，实现线性渐变和硬边分界效果。

知识点

先看本节范围

本节围绕 CSS3 新增文本属性展开，核心包括：text-align-last、文本修饰线一组属性、overflow-wrap（旧名 word-wrap）、white-space、text-overflow 与 text-shadow。学习时不要只背值，要抓住每条属性解决的排版问题：最后一行怎么对齐、修饰线能否换风格和颜色、长单词能否断开、空白和换行是否保留、单行溢出如何省略、文字如何加阴影。

text-align-last：最后一行怎么对齐

为什么需要： 普通 text-align 主要控制整体水平对齐，但最后一行往往需要单独处理。怎么想： 把它理解成“只负责最后一行”的对齐属性，值体系与 text-align 类似。怎么做： 可写 start、end、left、right、center、justify，默认 start，即靠文字起始方向对齐。易错点： 不要把它当成整段对齐开关；它解决的是最后一行，尤其是两端对齐场景下的收尾行。

文本修饰线：类型、风格、颜色拆开控制

为什么需要： 过去文本修饰线主要只能决定下划线、上划线、删除线，颜色通常跟随文字颜色，控制力弱。怎么想： CSS3 把能力拆成三个子属性：text-decoration-line 管“哪种线”，text-decoration-style 管“线型”，text-decoration-color 管“颜色”；text-decoration 则成为复合属性。怎么做：

.box span {
  text-decoration-line: underline; /* none / underline / overline / line-through */
  text-decoration-style: wavy;     /* solid / dashed / dotted / double / wavy */
  text-decoration-color: #080;
}

也可复合写：text-decoration: underline wavy #080;，多个值用空格分隔，没有严格顺序和数量要求。易错点： 笔记中 line-throuth 应纠正为 line-through；wavy 是修饰线风格，边框样式里并没有这个值。复合属性会覆盖前面的子属性：若先设置了颜色和风格，再写 text-decoration: underline;，颜色和风格会回到默认效果。

单词内部断行：overflow-wrap

为什么需要： 浏览器自动换行时要保证“单词完整性”，不会随便把单词拆成两半。转写稿调试时，一串没有空格的长英文会被浏览器视为一个“单词”，于是元素宽度不够时不是正常换行，而是整体溢出。怎么想： 要允许单词内部断开，就用 overflow-wrap。怎么做： 默认 normal 不允许；改为 break-word 允许断行。旧名 word-wrap 也可用，但 CSS3 已改名为 overflow-wrap。易错点： 笔记中的 break-wrod 应纠正为 break-word。中文网站基本用不到；正常英文单词较短也不常触发，只有超长无空格串才明显。

white-space：文本显示格式

为什么需要： HTML 默认会折叠多个空格、不识别手写换行，但有些内容需要保留原格式。怎么想： 把各值当成“是否保留空格/换行”和“是否自动换行”的组合。怎么做： normal 默认；pre 原格式显示，保留空格和换行，但不自动换行；pre-wrap 在 pre 基础上增加自动换行；pre-line 在 normal 基础上识别换行符，但多个空格仍折叠；nowrap 强制显示成一行。易错点： pre 不会自动换行；pre-line 不保留多个空格；nowrap 常与溢出省略配合，单独使用可能造成内容溢出。

单行长文本显示省略号

为什么需要： 新闻标题等固定宽度区域里，长标题不应换行，而应在末尾显示省略号。怎么想： 必须按顺序完成三步：先强制一行，再隐藏溢出，最后指定溢出文本显示省略号。怎么做：

/* 将文本强制显示到一行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 显示省略号 */
text-overflow: ellipsis;

易错点： 三步缺一不可。转写稿调试时只写 text-overflow: ellipsis 没效果；只加 nowrap 会溢出；再加 overflow: hidden 后，默认 clip 会把字“拦腰截断”；最后设置 ellipsis 才显示省略号。text-overflow 默认值是 clip，它负责的是“溢出文本怎么显示”，不负责单行和隐藏。

text-shadow：文本阴影

为什么需要： 给文字增加重影、描边感、立体感或特殊标题效果。怎么想： 规则比盒子阴影简单：设置阴影偏移、模糊值和颜色，没有外延值，也没有内阴影。怎么做：

/* 阴影偏移 */
text-shadow: 3px 3px; 
/* 阴影偏移 颜色 */
text-shadow: 4px 4px #999;
text-shadow: #900 4px 4px;
/* 阴影模糊值 */
text-shadow: 3px 3px 5px;
text-shadow: 3px 3px 15px rgba(0,0,0,.5);

/* 多阴影 */
text-shadow: 1px 1px #bbb, 
            2px 2px #aaa, 
            3px 3px #999,
            4px 4px #888,
            5px 5px #777,
            6px 6px #666;

易错点： 颜色可写在偏移前也可写在偏移后；多阴影用逗号分隔。偏移颜色与文字颜色接近时重影不明显，可改颜色、加模糊观察。用 0 0 模糊值 颜色 可做描边感；多组阴影逐层偏移可做伪 3D。它没有盒子阴影的外延和内阴影，不要混用规则。

渐变不是颜色，而是图片值

为什么需要：我们平时给元素上色用 background-color，但只能得到纯色。若想做出从红到绿、从浅蓝到深蓝的过渡，就需要“渐变”。本节笔记给出一句总纲：渐变是一个值，要作为一个图片被使用，可以使用渐变作为值的属性有 background-image、list-style-image 等。

怎么想：先把渐变理解成“浏览器生成的一张图”。它不是 red 这种颜色值，所以不能写给 background-color；要写给接收图片的属性，最常见的是 background-image。

怎么做：

.box {
  width: 400px;
  height: 250px;
  background-image: linear-gradient(red, green);
}

易错点：写成 background-color: linear-gradient(...) 不生效；渐变要放在 background-image 一类“图片槽位”里。list-style-image 也能用渐变值，但日常最常用仍是 background-image。

线性渐变的语法骨架

为什么需要：知道“渐变是图片”后，还要能控制它从哪到哪、经过哪些颜色。线性渐变的骨架是：方向 + 颜色列表。

怎么想：转写稿中反复调试的顺序是：先写 linear-gradient(方向, 颜色列表)；方向可省略，颜色至少两个，多个颜色用逗号分隔。

怎么做：

.box {
  background-image: linear-gradient(90deg, red, green);
}

这里 90deg 表示从左到右，效果是左红右绿。若不写方向，浏览器按默认方向处理；转写稿中说明默认可理解为从上到下（180deg）。

易错点：颜色之间用逗号，不要用空格混在一起；方向与第一个颜色之间也用逗号分隔。角度单位要写 deg，不能只写数字。

用关键字和角度控制方向

为什么需要：只靠默认方向不够，标题、按钮、卡片可能需要斜向渐变。转写稿中演示了关键字和角度两种方式。

怎么想：关键字适合“上、下、左、右、左上、右上”等直观方向；角度适合精确旋转。转写稿特别说明：to right top 和 to top right 在这里没有区别，因为它们是参数，不是属性名，浏览器能解析；而上午讲边框属性名时顺序有讲究，情况不同。

怎么做：

.box1 { background-image: linear-gradient(to right top, red, blue); }
.box2 { background-image: linear-gradient(45deg, red, blue); }

转写稿调试角度时写 10deg，然后动态改数字，看到方向箭头顺时针转；0deg 是从下到上，180deg 是从上到下，90deg 从左到右。超过 360deg 也会一圈圈继续转。

易错点：把 deg 漏掉；把关键字顺序当成属性名顺序来纠结；角度方向记反时，直接用浏览器刷新观察，别死背。

用颜色位置控制渐变区间

为什么需要：默认两个颜色会从一端均匀过渡到另一端，但设计里常要“前 100px 纯红，再开始渐变”。转写稿用像素和百分比演示了颜色位置。

怎么想：每个颜色后面可以跟一个位置，表示该颜色从哪个点开始进入。若红写 100px，则 0—100px 是纯红，100px 之后才向绿色过渡；若绿写 200px，则 100—200px 发生渐变，200px 后是纯绿。

怎么做：

.box {
  background-image: linear-gradient(90deg, red 100px, green 200px);
}

百分比也可：

.box {
  background-image: linear-gradient(90deg, red 50%, green 60%);
}

转写稿说明：百分比不是简单参照元素宽度，而是参照“渐变方向”的那条线；从左到右时可近似理解为宽度，斜向时就是斜线方向。

易错点：位置写在颜色后面，中间用空格；两个颜色写同一位置会产生“泾渭分明”的硬边，例如红 50%、绿 50%，此时没有过渡区。这不是错误，而是做硬边彩条的手段。

多颜色与硬边彩条的调试

为什么需要：真实项目不只有两色渐变。转写稿演示了五个颜色默认会均匀分布，像彩虹一样铺开。

怎么想：多个颜色用逗号分隔；不指定位置时浏览器平均分配。若想做出彩条，就让相邻颜色在同一位置相交，例如红 20%、黄 20% 形成硬边，黄 40%、蓝 40% 再形成硬边。

怎么做：

.box {
  background-image: linear-gradient(
    90deg,
    #900 20%,
    #990 20%,
    #990 40%,
    #099 40%,
    #099 60%,
    #909 60%,
    #909 80%,
    #009 80%
  );
}

转写稿调试时先写纯红到纯黄等区间，最后形成一条条色带；开头和结尾可只写一次位置，因为边界已经确定。

易错点：同一位置写两遍颜色是为了硬边，不是重复无效；多颜色不写位置会均匀过渡，不会自动变成彩条；调试时刷新看不到变化，先检查是否写进了 background-image。

调试顺序与常见坑

为什么需要：转写稿的调试过程说明，渐变效果不是“一把写对”，而是逐步观察。

怎么想：先写两色看方向，再加位置看区间，再加多色看分布，最后调角度和硬边。

怎么做：按“方向 → 两色 → 位置 → 多色 → 硬边”的顺序改；每次只改一个变量，刷新观察。

易错点：把渐变写到颜色属性；漏 deg；颜色位置与颜色之间漏空格；把百分比误当成元素宽高；把同位置硬边误认为浏览器出错。渐变本身不复杂，关键是记住它是“图片值”，并用方向、颜色、位置三件事控制它。

本节范围与转写稿说明

本节笔记主题是 Filter 滤镜。需要先说明：提供的转写稿主要讲文本修饰线、单词断行、white-space、text-overflow、text-shadow 和线性渐变，并没有涉及 filter 的课堂推导与调试过程。因此下面不把“文本阴影”误当成 drop-shadow()，也不编造录屏细节；滤镜部分严格按本节表格和代码扩写。本节笔记没有图片，底部代码保留如下：

filter: 滤镜函数(参数);

blur()				模糊
grayscale()			灰度

filter 的基本写法与组合

为什么需要：有时我们要对元素本身、背景图或内容做模糊、调色、灰度、反色等处理，但不希望改原图，也不想增加额外结构，filter 就是为此服务的。

怎么想：filter 的值不是单个颜色，而是一个或多个“滤镜函数”。多个函数用空格分隔，效果按书写顺序叠加。先想清楚要“模糊”还是“调色”，再选函数和参数。

怎么做：

.box {
  filter: blur(4px) grayscale(1);
}

易错点：多个滤镜函数之间是空格，不是逗号；filter 作用在元素渲染结果上，不是只作用在背景图；不要和 backdrop-filter 混淆，本节没有讲后者。

blur() 模糊

为什么需要：做背景虚化、图片柔化、强调层前后关系时常用模糊。

怎么想：blur() 的参数是长度，值越大越模糊；它不接受百分比。

怎么做：

.box {
  filter: blur(5px);
}

易错点：笔记明确写了“百分比无效”，所以 blur(50%) 不是正确用法；值过大不仅看不清，也可能带来性能压力。

brightness()、saturate()、contrast()

为什么需要：这三类函数用于快速调亮、调饱和、调对比，常用于图片 hover、禁用态、封面调色。

怎么想：它们都可写数字或百分比。1 或 100% 表示无效果，0 表示该维度的极端值，且可以大于 1。brightness(0) 全黑；saturate(0) 完全不包含饱和度；contrast(0) 全灰。

怎么做：

.pic {
  filter: brightness(1.2) saturate(1.5) contrast(1.1);
}

易错点：默认值都是 1；不要以为只能写 0~1，笔记明确说可以比 1 大。contrast(0) 是灰，不是“无效果”。

grayscale()、sepia()、hue-rotate()、invert()

为什么需要：灰度用于去色，深褐色用于复古，色相旋转用于换色调，反转用于负片效果。

怎么想：grayscale()、sepia()、invert() 用 0~1 数字或百分比；hue-rotate() 用角度。0 无效果，1 是最高/彻底值。sepia(1) 是深褐色度最高，不是“灰度最高”。

怎么做：

.old {
  filter: grayscale(1) sepia(0.6);
}
.rotate {
  filter: hue-rotate(90deg);
}
.invert {
  filter: invert(1);
}

易错点：hue-rotate() 要带角度单位，如 deg；grayscale(1) 是灰度最高；invert(1) 才是彻底反转。

opacity() 与 drop-shadow()

为什么需要：opacity() 作为滤镜可参与滤镜链；drop-shadow() 可给元素透明轮廓加阴影，和 box-shadow 不是一回事。

怎么想：opacity() 用 0~1 或百分比。注意本节表格写“0 完全不透明，1 彻底透明，默认0”，这与 CSS 实际行为相反：应为 0 全透明、1 无效果、默认 1。这是必须纠正的易错点。drop-shadow() 按笔记需要设置偏移位置、模糊值、颜色。

怎么做：

.card {
  filter: opacity(0.8) drop-shadow(2px 4px 6px rgba(0,0,0,.3));
}

易错点：不要把 opacity() 滤镜和 opacity 属性混为一谈；drop-shadow() 不是 box-shadow，它跟随透明轮廓；表格中 opacity 描述按标准应纠正。

url() 与收束

为什么需要：当内置滤镜函数不够时，可以用 SVG 定义滤镜，再通过 url() 引用。

怎么想：url() 指向 SVG 滤镜的引用标识，适合复杂滤镜效果；本节只给到这一层，不展开 SVG 内部写法。

怎么做：

.box {
  filter: url(#myFilter);
}

易错点：引用的 SVG 滤镜必须存在且可被当前文档解析；初学阶段优先掌握内置函数。最后记住本节底部两个高频函数：blur() 模糊、grayscale() 灰度，并牢记 filter 的函数列表写法。

课堂画面

代码示例

示例一：CSS3 文本修饰线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 文本修饰线</title>
  <style>
    .box {
      width: 400px;
      height: 250px;
      background: #cccccc;
    }
    /* 三个子属性分开设置：类型 / 风格 / 颜色 */
    .box span {
      text-decoration-line: line-through;   /* 线的类型 */
      text-decoration-style: wavy;          /* 线的风格 */
      text-decoration-color: #080;          /* 线的颜色 */
    }
    /* 复合属性：多个值空格分隔，没有顺序和数量要求 */
    .box .multi {
      text-decoration: underline double #900;
    }
  </style>
</head>
<body>
  <div class="box">
    前面的文字 <span>这一部分带修饰线</span> 后面的文字<br>
    <span class="multi">复合属性写法</span>
  </div>
</body>
</html>

关键行与易错点

• text-decoration-line 只负责“是什么线”，值为 none / underline / overline / line-through，默认 none。
• text-decoration-style 的值为 solid / dashed / dotted / double / wavy，其中 wavy（波浪线）是 border-style 里没有的，别记混。
• 复合属性 text-decoration 一旦写了，就会把 style、color 重置为默认值——比如前面单独设了 text-decoration-color: #080，后面又写 text-decoration: underline，绿色线就没了。
• 复合属性多值之间只能用空格分隔，顺序随便写，浏览器都能解析。

---

示例二：white-space 显示格式 + 单行文本溢出省略号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>white-space 与单行文本溢出省略号</title>
  <style>
    .news {
      width: 400px;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .news li {
      line-height: 40px;
      list-style: square inside;
    }
    /* 单行长文本显示省略号：三步，一步都不能少 */
    .news li.ellipsis {
      white-space: nowrap;      /* 1. 强制文字显示在一行 */
      overflow: hidden;         /* 2. 溢出部分隐藏 */
      text-overflow: ellipsis;  /* 3. 溢出文本显示省略号 */
    }

    /* white-space 各值对比 */
    .demo p {
      width: 400px;
      padding: 20px;
      background: #ccc;
      margin: 10px 0;
    }
    .pre      { white-space: pre; }       /* 原格式显示，但不自动换行 */
    .pre-wrap { white-space: pre-wrap; }  /* pre 基础 + 自动换行 */
    .pre-line { white-space: pre-line; }  /* 识别换行符 + 自动换行 */
    .nowrap   { white-space: nowrap; }    /* 强制显示成一行 */
  </style>
</head>
<body>
  <ul class="news">
    <li class="ellipsis">这是一个特别特别长的新闻标题，长到一行根本放不下，后面需要显示省略号</li>
    <li>短标题</li>
    <li class="ellipsis">另一个同样很长的新闻标题，超出一行宽度时显示省略号的效果</li>
  </ul>

  <div class="demo">
    <p class="pre">原格式显示：      这里有多个空格
这里手打了换行，但文字很长很长很长很长很长很长很长很长很长的时候不会自动换行</p>

    <p class="pre-wrap">pre-wrap：      多个空格保留
手打换行保留，同时文字很长很长很长很长很长很长很长的时候会自动换行</p>

    <p class="pre-line">pre-line：      多个空格不保留
手打换行保留，同时文字很长很长很长很长很长很长很长的时候会自动换行</p>

    <p class="nowrap">nowrap：      强制显示成一行，手打换行和文字太长通通不认</p>
  </div>
</body>
</html>

关键行与易错点

• 省略号三步顺序固定：white-space: nowrap → overflow: hidden → text-overflow: ellipsis。少任何一步都无效：不加 nowrap 文字自动换行根本不会溢出；不加 overflow: hidden，text-overflow 无从生效。
• text-overflow 默认值是 clip，配合 overflow: hidden 时会把文字“拦腰砍断”，所以必须显式改成 ellipsis。
• text-overflow 只作用于单行文本，多行省略号它做不到。
• white-space: pre 会保留空格和换行符，但丢掉自动换行；pre-wrap 才是“pre + 自动换行”；pre-line 更像 normal，只是额外识别手写换行符，多个空格依然只显示一个。
• white-space: nowrap 是这一组里最常用的值，因为它就是省略号三步的第一步。

---

示例三：文本阴影（含多阴影伪 3D）与线性渐变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本阴影与线性渐变</title>
  <style>
    /* 1. 白底白字：靠阴影描边让文字清晰 */
    .books03 {
      font-size: 100px;
      font-weight: 800;
      color: #fff;
      background: #fff;
      text-shadow: 0 0 1px rgba(0, 0, 0, .5);
    }

    /* 2. 多阴影叠加实现伪 3D 文字 */
    .books04 {
      font-size: 100px;
      font-weight: 800;
      color: #ccc;
      text-shadow:
        1px 1px #bbb,
        2px 2px #aaa,
        3px 3px #999,
        4px 4px #888,
        5px 5px #777,
        6px 6px #666;
    }

    /* 3. 线性渐变：颜色后面可以跟位置，位置相同即为“泾渭分明”的色条 */
    .books02 {
      width: 400px;
      height: 100px;
      background-image: linear-gradient(90deg,
        #900 20%,
        #990 20%, #990 40%,
        #099 40%, #099 60%,
        #909 60%, #909 80%,
        #009 80%);
    }
  </style>
</head>
<body>
  <div class="books03">白底白字</div>
  <div class="books04">3D 文字</div>
  <div class="books02"></div>
</body>
</html>

关键行与易错点

• text-shadow 只能写三样：偏移（两个长度）、模糊值、颜色；没有外延值，也没有内阴影，比 box-shadow 简单。颜色写在前面后面都可以，只写两个长度时颜色默认取文字颜色。
• 多个阴影之间用逗号分隔，一层偏移比一层大，就叠出了 3D 的立体感。
• 模糊值配合 0 偏移（0 0 1px rgba(0,0,0,.5)）就是“描边”效果，白底白字靠它才能看清。
• 渐变是一个值，不是属性，所以必须写成 background-image: linear-gradient(...)，写成 background: linear-gradient(...) 也行，但绝不能写 background-color。
• 方向两种写法：关键字 to right / to top right（顺序无所谓），或角度 90deg；0deg 是向上、180deg 是向下，角度增大方向顺时针转。
• 颜色后面的百分比是沿渐变方向的位置，不是元素宽度；两个颜色写同一个位置，中间就没了过渡，直接变成色块分界线。

常见错误

1. 单行省略号不出现：只写了 text-overflow: ellipsis，文本仍换行或直接溢出 → 缺少“单行 + 溢出隐藏”的前置条件 → 同时设置 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，并确认容器有可触发溢出的宽度。
2. 修饰线颜色/风格被覆盖：先写 text-decoration-color/style，后又写 text-decoration: underline，颜色和波浪线消失 → 复合属性会覆盖未写出的子项 → 调整声明顺序，或改用完整复合值，或只使用子属性。
3. 长单词仍撑破容器：设置了 overflow-wrap: break-word 仍溢出 → 容器宽度未约束、父级 flex/grid 子项 min-width:auto，或存在 white-space:nowrap → 给容器明确宽度，flex 子项加 min-width:0，检查并移除冲突的 white-space。
4. 使用 white-space: pre 后长行不换行：保留空格和换行后布局被撑破 → pre 不自动换行 → 需要原格式且自动换行时改用 pre-wrap；只需识别换行、不保留多空格时用 pre-line。
5. 渐变声明无效：写成 background-color: linear-gradient(...) 或角度缺单位 → 渐变是图片值而非颜色值；角度需单位 → 改用 background-image/background，角度写成 45deg，关键字方向带 to。
6. filter: opacity() 效果与预期相反：以为 opacity(0) 是不透明，实际元素消失 → 混淆滤镜函数与 opacity 属性，且值域记反 → 按 0 全透明、1 不透明使用，调试时与普通 opacity 属性区分。

练习

1. 做一个固定宽度的新闻标题列表，要求每条标题只显示一行，超出显示省略号；写出三行关键 CSS，并说明每一行缺失时分别会出现什么现象。
2. 用 text-decoration-line/style/color 给文字做“红色波浪删除线”，再用 text-decoration 复合属性改写一次，观察并解释差异。
3. 同一段包含多空格、手写换行和长句的文本，分别用 white-space 的 normal、pre、pre-wrap、pre-line、nowrap 展示，记录“空格、换行符、自动换行”三项表现。
4. 用 linear-gradient 完成两个效果：① 90deg 红绿硬边分割；② 五色等宽彩条。要求写出颜色位置的计算过程。
5. 用 text-shadow 在一个白色背景上实现“白字可读”的描边感，再改成多层阴影的伪 3D 文字，比较偏移、模糊、颜色的调整思路。

原视频对照

#	视频	时长
1	文本修饰线	07:52
2	是否允许单词内部断行	04:38
3	设置文本的显示格式	09:11
4	溢出长文本显示省略号	08:06
5	文本阴影	13:54
6	线性渐变	18:41

小结

1. 文本溢出省略号是组合效果，不是单个属性；排查时先看是否单行、是否隐藏溢出。
2. text-decoration 复合属性容易造成“后写覆盖前写”，调试修饰线优先查级联顺序和完整值。
3. white-space 实际同时影响空白折叠、换行符识别和自动换行，选值要按需求拆开判断。
4. 渐变属于图片值，不是颜色值；颜色位置决定渐变区间，位置相等可做硬边分割。
5. 线性渐变方向可用关键字或角度，角度必须带单位，默认方向与角度方向要结合案例验证。
6. 文本阴影可多层叠加，适合做描边感和伪 3D；它没有外延值和内阴影。
7. 断词、溢出、省略号都依赖容器宽度与换行上下文，flex/grid 布局下要额外检查 min-width 和 white-space 冲突。