text-decoration · 文字装饰

文字装饰：给字形画线、加点、加效果

装饰是排版中独立的一层：它绘制在文字之上，不改变文字本身的排布。CSS Text Decoration 模块管理的正是这一层——链接下划线的样式、离基线的距离、是否避开 g、y、j 这些字母的降部（text-decoration-skip-ink）；中文着重号（text-emphasis）点在字的上方还是下方、竖排时位于哪一侧；以及 text-shadow、background-clip: text 渐变文字、text-transform 大小写与全角转换。

本页三节：下划线相关属性、着重号、文字视觉效果。每节一块实时重算的演示区，旁边的 CSS 代码同步生成。

1 · 下划线相关属性

text-decoration: underline 只是 shorthand 的一种简单形式。它是四个 longhand 的合写：text-decoration-line（画哪几条线，可叠加）、text-decoration-style（线型）、text-decoration-color（线色，独立于文字色）、text-decoration-thickness（线粗）。线画在哪、怎么避让，另有三个属性掌管：text-underline-offset（离基线多远）、text-underline-position（以什么为基准）、text-decoration-skip-ink（遇到 g、y、j、p 这些字母的降部要不要断开让路）。

图 1-1 · 样本特意选了降部密集的 typography jelly 加上 CJK 的杭州大堡礁。可切 skip-ink 的 pill，看线在拉丁字母降部处断开、在汉字下却照画不误；再切到 all，汉字的出锋笔画也开始让路。

1.1 · 七个属性的分工

表 1-1 · 前四个可合写进 text-decoration shorthand；后三个是独立属性，不参与 shorthand。
属性	它管什么	要点
`text-decoration-line`	画哪几条线	underline / overline / line-through 可同时多值；none 全关
`text-decoration-style`	线型	solid / double / dotted / dashed / wavy，一套 style 作用于全部线
`text-decoration-color`	线色	默认 currentColor；可与文字色分离（链接下划线淡化的常用手法）
`text-decoration-thickness`	线粗	auto / from-font / 长度或百分比（相对 1em）
`text-underline-offset`	下划线离基线多远	只影响 underline，不动 overline 与 line-through
`text-underline-position`	下划线的基准位置	auto 贴 baseline；under 放到降部以下（数学与化学式不被穿过）；竖排另有 left / right
`text-decoration-skip-ink`	遇笔画断不断	auto 避让拉丁降部但不避 CJK；none 一画到底；all 连 CJK 也避

注 · 装饰线是穿透绘制的。text-decoration 不可被后代单独取消：父元素画的下划线会贯穿子元素的文字，子元素写 text-decoration: none 去掉的只是自己声明的线，父级那条照画。想局部断线，只能让该段脱离所在的行内格式化上下文，例如改成 display: inline-block。

警示 · 遇到降部有两种处理方式，效果与代价不同：skip-ink: auto 在笔画处断开，线仍贴着 baseline；text-underline-position: under 让整条线沉到降部之下，不断开但离文字更远。化学式与数学式常用后者，正文链接常用前者——切换 pill 可直接对比。

2 · 着重号

西文强调用斜体，中文没有斜体传统，传统做法是着重号：在要强调的字下逐字加点。CSS 用三个属性实现它：text-emphasis-style 选记号（dot / circle / triangle / sesame，各有 filled 与 open 两态，还能换成任意自定义字符）、text-emphasis-color 上色、text-emphasis-position 决定记号点在字的上方还是下方。它逐字绘制、随字走，和 text-decoration 的「一条线贯穿」完全是两套机制。

着重号需要注意排版方向：大陆习惯横排点在字下 (under)，日文圈点在字上 (over)；切到 writing-mode: vertical-rl 竖排时，over 的记号位于行的右侧、under 位于左侧。

图 2-1 · 横排与竖排样本实时对照。可换记号形态与颜色，并切换 position 观察记号在竖排下换到哪一侧。

2.1 · style 的取值

表 2-1 · filled 与 open 和记号名组合，如 open sesame；省略填充词默认 filled。shorthand 写作 text-emphasis: filled sesame #d6409f，position 不进 shorthand，需单独写。
取值	形态	常见用途
`dot`	小点（filled ・ / open ◦）	中文着重号的标准形态
`circle`	圆圈（● / ○）	日文横排常用
`double-circle`	双圈（◉ / ◎）	强调中的强调
`triangle`	三角（▲ / △）	教材与试卷标注
`sesame`	芝麻点（﹅ / ﹆）	日文竖排的传统圈点
任意字符串	只取第一个字素簇	♥ / ★ / 注音式标记

position 不进 shorthand 是有意为之：着重号位置属于文档级排版约定（整本书统一点上或点下），而记号样式是局部强调选择。规范因此把 text-emphasis-position 拆出去，建议设在根元素上继承全文，各处 text-emphasis 只管换记号换色。三个属性都是继承属性，这点和 text-decoration（不继承、穿透绘制）正好相反。

警示 · 行高会被撑开。着重号画在行盒之外的 emphasis 区，浏览器会为它额外预留约半个字高：本节样本特意设为 line-height: 2.6，如果正文行高紧凑（如 1.4），带着重号的那行会明显变高，甚至与相邻行重叠。应用前需检查行距。

3 · 文字视觉效果

本节是装饰层之外的三种视觉手段：text-shadow 负责给字形投影，逗号分隔可叠加任意多层，霓虹、长投影、浮雕都通过叠加层数实现；background-clip: text 把背景裁剪进字形轮廓，配合 -webkit-text-fill-color: transparent 让渐变透出，即为渐变文字；text-transform 则在渲染时改写字符形态（大小写、全角化、小假名转全尺寸），源文本保持不变。

3.1 · `text-shadow` 的层数

图 3-1 · 阴影层数即效果。可加减层数、调 offset 与 blur，右侧代码同步生成。

text-shadow 没有 spread、也没有 inset。语法只有 offset-x offset-y blur-radius color 四段，比 box-shadow 少两项；想要描边感只能靠四个方向各放一层 1px 实影来伪造（见「伪描边」预设）。阴影绘制在装饰线之下、背景之上，且不参与布局——字还在原地，只是画出去了。

3.2 · 渐变文字

图 3-2 · 把背景裁剪进字形轮廓。可换渐变与角度，观察字形之外的背景如何被切掉。

警示 · -webkit- 前缀仍有必要（核对于 2026-08）。background-clip: text 起源于 WebKit 私有扩展，无前缀写法落地相当晚：Safari 14（2020-09）、Chrome 与 Edge 直到 120（2023-12）才支持无前缀形式，此前只认 -webkit-background-clip: text；Firefox 虽自 49（2016-09）就支持，但配 background-attachment: fixed 或多层背景混用其他 clip 值时仍有已知缺陷。所以前缀在前、标准在后双写依然稳妥。挖空文字色则要用 -webkit-text-fill-color: transparent 而非 color: transparent——前者只透字形填充，选中文本与 caret 仍按 color 计算，降级时也只是看到纯色而非消失。

3.3 · `text-transform` 的改写范围

图 3-3 · 渲染期的字符改写。可在大小写、全角化、小假名放大之间切换，源文本一栏始终不变。

text-transform 改的是渲染而非文本。它只影响绘制出来的字形，DOM 里的源文本、复制到剪贴板的内容（多数浏览器）都保持原样——这正是它和「在源码里直接写大写」的区别：语义留给 HTML，样式交给 CSS。full-width 把 ASCII 与半角假名转成全角等宽形态（CJK 混排对齐用），full-size-kana 把小假名（っ / ゃ / ぁ）放大为普通假名，专为 ruby 注音小字号下小假名难以辨认的场景设计。