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 多层叠加时顺序决定渲染层级

多个阴影用逗号分隔，**从左到右即从上到下堆叠**：左侧阴影在最上层，右侧在最底层。如果顺序错乱，比如把模糊半径大的写在前面，会盖住后面精细的描边效果。

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

• 第一层（最上）：常用于高亮或内发光，用小偏移 + 小模糊
• 最后一层（最下）：适合大范围投影，用大偏移 + 大模糊
• 所有层的 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 场景里最容易漏掉。

立即学习“前端免费学习笔记（深入）”；