css简写属性需严格遵循规范：text-decoration必须含line-style（如underline solid #007bff）；font中font-size/line-height须用斜杠连接且font-family置尾；text-shadow多层从左到右由上至下堆叠；简写会重置未指定子属性为初始值。
css text-decoration 简写必须带 line-style 才生效
单独写 text-decoration: underline 看似没问题，但实际是「不完整简写」，浏览器会重置其他装饰线属性（如 text-decoration-color、text-decoration-thickness）为默认值。真正安全的简写格式是三值或四值：
text-decoration: underline solid #007bff;其中 solid 是 text-decoration-style，不可省略——省略后整个声明可能被忽略或回退到旧语法行为。
font 多属性简写中 font-size 和 line-height 必须用斜杠紧连
font 是高风险简写属性，顺序和格式稍错就导致整条声明失效。关键约束有：
-
font-size和line-height必须写成16px/1.5这种形式，中间是/，不能空格或换行 -
font-family必须放在最后，且需用引号包裹含空格的字体名（如"Segoe ui"） - 缺失
font-size或font-family时，整条font声明会被浏览器丢弃
正确示例：
font: italic bold 18px/1.4 "Helvetica Neue", sans-serif;text-shadow 多层叠加时顺序决定渲染层级
多个阴影用逗号分隔，**从左到右即从上到下堆叠**：左侧阴影在最上层，右侧在最底层。如果顺序错乱，比如把模糊半径大的写在前面，会盖住后面精细的描边效果。
- 第一层（最上）：常用于高亮或内发光，用小偏移 + 小模糊
- 最后一层（最下）：适合大范围投影，用大偏移 + 大模糊
- 所有层的
color必须显式写出，不能依赖继承
示例（文字描边+外投影）：
text-shadow: 0 0 2px #fff, 1px 1px 3px rgba(0,0,0,0.3);简写属性覆盖隐式初始值，容易意外清空自定义设置
像 text-emphasis、text-underline-offset 这类较新属性，一旦用了 text-decoration 简写，它们就会被重置为 initial。这不是 bug，是 CSS 简写规范强制行为——所有未显式指定的子属性都会回归初始值。
- 如果你之前设置了
text-underline-offset: 3px，再写text-decoration: underline，下划线立刻贴底 - 解决办法：要么统一用完整简写（如
text-decoration: underline solid currentColor 3px），要么改用独立属性组合 - 调试时可用 DevTools 的「Computed」面板查看哪些值被覆盖了
这种覆盖无声无息，尤其在组件复用或 CSS-in-js 场景里最容易漏掉。
立即学习“前端免费学习笔记（深入）”；