hwb颜色函数不生效的首要原因是浏览器版本过低，chrome 108+、firefox 111+、safari 16.4+ 和 edge 109+ 才开始原生支持hwb()，ie及旧版safari完全不支持。
hwb() 不生效的首要原因是浏览器不支持
Chrome 108+、Firefox 111+、Safari 16.4+ 和 Edge 109+ 才开始原生支持 hwb()；IE、旧版 Safari（color: hwb(120 30% 20%)，在不支持的浏览器里等价于没写——不是颜色错，是根本没解析。
写了 hwb() 却被 fallback 覆盖
很多人误以为加个降级就能“安全”，但实际顺序写反会导致 hwb() 永远不生效：
- 错误写法：
color: rgba(0, 128, 0, 0.8); color: hwb(120 30% 20%);—— 后者被支持时会覆盖前者，但不支持时前者生效，看似 OK；可一旦前者本身有语法错误（比如漏了单位、用了中文逗号），整条规则失效，hwb()就彻底丢失 - 正确写法：始终把兼容性好的放前面，
hwb()放最后，且确保前一条语法绝对合法，例如：color: #4CAF50; color: rgb(76, 175, 80); color: hwb(120 30% 20%); - 注意：CSS 变量中用
var(--color)引用hwb()值时，变量本身必须定义在支持hwb()的上下文中；否则变量值为空，后续使用直接退化为 inherit 或初始值
hwb() 参数格式错误导致静默失败
hwb() 对空格和单位敏感，稍错就整个函数无效：
- 色调
H必须是 0–360 的数字，不能带单位（hwb(120deg ...)❌） - 白度
W和黑度B必须带%（hwb(120 30 20)❌，hwb(120 30% 20%)✅） - 透明度写法必须用斜杠语法：
hwb(120 30% 20% / 0.7)，不能用逗号或括号包裹（hwb(120 30% 20%, 0.7)❌） - 函数内不允许换行或注释，多空格会被部分旧引擎截断（如
hwb(120 30% 20%)在 iOS 15.6 的某些 WebView 中失败）
开发者工具里看到 computed 值却仍不渲染
Computed 面板显示 rgb(102, 153, 102) 并不代表 hwb() 生效了——那是浏览器在支持前提下内部转换的结果；如果元素最终没上色，大概率是：
- 父元素设置了
color: transparent或opacity: 0，遮盖了子元素颜色 - CSS 优先级被更高 specificity 的规则覆盖（比如
.btn:hover里写了color: red，而你的hwb()在普通状态） - 用了
!important但写在了不支持的浏览器里，反而让整条规则被忽略（部分旧引擎遇到!important就跳过整行）
真正难排查的是：它不报错、不警告，只是安静地消失。别只盯着函数本身，先确认它所在的那条 CSS 规则是否进入了 Styles 面板的“Matched CSS Rules”列表里——不在，就说明解析失败或选择器没匹配上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
