为何-webkit-linear-gradient与linear-gradient负角度参数渲染结果不同？

这是因为早期WebKit内核浏览器（如旧版Chrome、Safari）实现的-webkit-linear-gradient采用了与最终CSS标准不一致的角度定义规则，正角度刚好巧合方向重合，负角度则暴露了核心差异：

• 标准linear-gradient的角度规则：

  • 0deg表示渐变方向向上，角度值增大时，渐变方向顺时针旋转。
  • 比如linear-gradient(-45deg, black, red)：负角度代表逆时针旋转45度，渐变方向指向左上，实际是从右下（黑色）过渡到左上（红色）。

• 旧版-webkit-linear-gradient的角度规则：

  • 0deg表示渐变方向向右，角度值增大时，渐变方向逆时针旋转。
  • 比如-webkit-linear-gradient(-45deg, black, red)：负角度等价于顺时针旋转45度，渐变方向指向右下，实际是从左上（黑色）过渡到右下（红色）。

为什么45deg时两者结果一致？ #

当角度为45deg时，两种规则的渐变方向刚好重合：

• 标准linear-gradient(45deg)：向上顺时针转45度，方向指向右上，渐变从左下到右上。
• 旧版-webkit-linear-gradient(45deg)：向右逆时针转45度，方向同样指向右上，渐变也是从左下到右上。
  所以视觉效果完全一致。

后来WebKit内核浏览器跟进了标准规范，新版本的Chrome、Safari已支持标准linear-gradient语法，无需前缀也不会再出现这类角度差异问题。

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