-webkit-linear-gradient与linear-gradient的区别及转换方法

两者最容易导致渲染效果不一致的差异是角度计算规则完全不同，其余色标、颜色值的规则没有本质区别：

• 标准linear-gradient()的角度规则：0deg指向元素正上方（正北方向），角度值沿顺时针方向递增，90deg指向元素右侧（正东）、180deg指向元素底部（正南）。
• 旧版非标准-webkit-linear-gradient()的角度规则：0deg指向元素正右侧（正东方向），角度值沿逆时针方向递增，90deg指向元素顶部（正北）、180deg指向元素左侧（正西）。

额外说明：目前新版webkit内核浏览器支持的带-webkit-前缀的渐变，如果使用to 方向关键字（比如to right）或者标准角度规则，和无前缀标准写法效果完全一致，不需要做转换，只有遵循旧角度规则的老式-webkit渐变写法才存在角度差异。

转换时不需要修改颜色值、色标位置，只需要按照固定公式换算角度即可：

标准渐变角度 = 90deg - 旧版-webkit渐变的角度值

以给出的代码为例：
原旧版webkit代码：

-webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);

代入公式计算标准角度：90deg - 65deg = 25deg，因此正确的标准写法为：

linear-gradient(25deg, #A683E3 50%, #E4E9FD 50%);

直接照搬65deg作为标准角度，相当于渐变线方向和原效果偏差了130度，对于硬分界的双色渐变来说，分割斜线的倾斜角度、位置都会完全错位，因此渲染效果差异极大。

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