text-decoration · 文字装饰

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

「装饰」是排版中独立的一层：它绘制在文字之上，不改变文字本身的排布。CSS Text Decoration 模块管理的正是这一层——链接下划线的样式、离基线的距离、是否避开 g / y / j 的降部(text-decoration-skip-ink)；中文的着重号(text-emphasis)点在字的上方还是下方、竖排时位于哪一侧；以及 text-shadow、background-clip: text 渐变文字、text-transform 大小写与全角转换。本页三节，每节一块实时重算的演示区：拖动滑块、切换 pill，旁边的 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 的降部要不要断开让路）。

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

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 与 underline-position 的取舍。遇到降部有两种处理方式：skip-ink: auto 在笔画处断开（线仍贴着 baseline），或 text-underline-position: under 让整条线沉到降部之下（不断开，但离文字更远）。化学式 / 数学式常用后者，正文链接常用前者——切换 pill 对比两者的效果。

2 · 着重号：中文传统的强调方式

西文强调用 italic，中文没有斜体传统——传统做法是着重号：在要强调的字下逐字加点。CSS 将其实现为 text-emphasis 三个属性：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 · style 的取值：记号、填充、自定义

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：层数即效果

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

3.2 · 渐变文字：把背景裁剪进字形

为什么要写 -webkit- 前缀？background-clip: text 起源于 WebKit 的私有扩展，各引擎长期只认 -webkit-background-clip: text；如今无前缀写法已普遍支持，但为兼容旧版仍建议前缀在前、标准在后双写。同理，挖空文字色用 -webkit-text-fill-color: transparent 而不是 color: transparent——前者只透字形填充，选中文本、caret 等仍按 color 计算，降级时也只是看到纯色而非消失。

3.3 · text-transform：渲染期的字符改写

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