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」面板查看哪些值被覆盖了
立即学习“前端免费学习笔记(深入)”;










