Angular 12组件内-webkit-gradient样式IDE提示参数不匹配报错

报错根因 #

你使用的-webkit-gradient()是已经被废弃多年的旧版WebKit私有渐变语法，新版WebKit内核浏览器、Angular 12内置的CSS校验规则、WebStorm的语法校验都不再兼容该旧语法，因此会抛出参数不匹配的错误。

修复方案 #

把/START/和/END/包裹的旧代码替换为新版-webkit-linear-gradient()语法即可，渐变方向、颜色节点和原逻辑完全一致：

background: -webkit-linear-gradient(
  top,
  #327aa4,
  #2e4b5a 45%,
  #5cb0dc
);

如果需要和下方-moz-linear-gradient的半透明效果对齐，可以统一加上透明度参数：

background: -webkit-linear-gradient(
  top,
  rgba(50, 123, 165, 0.75),
  rgba(46, 75, 90, 0.75) 45%,
  rgba(92, 176, 220, 0.75)
);

可选优化 #

Angular 12构建流程内置了Autoprefixer前缀自动补全工具，你可以直接写W3C标准渐变语法，工具会自动生成对应浏览器的私有前缀代码，不需要手动维护多套前缀语法：

background: linear-gradient(
  to bottom,
  rgba(50, 123, 165, 0.75),
  rgba(46, 75, 90, 0.75) 45%,
  rgba(92, 176, 220, 0.75)
);

替换后IDE报错会自动消失，渐变效果在所有主流浏览器中都能正常生效。

内容的提问来源于stack exchange，提问作者Nesan Mano