Web和Android的渐变角度区别

从蓝湖（或者其他设计稿）里复制一个渐变的 angle 值，贴到 Android 的 XML 里，几乎每次方向都不对。然后我就开始靠猜 + 调试，一个一个改角度，调半天才对上方向。

最近又开始做 Web 前端，渐变上 Web 和 Android 的规则还不一样，搞得我更头大了。所以我这次下定决心，彻底搞清楚他们各自的角度系统到底怎么一回事。下面是研究结论

---

Android 的渐变角度 = 数学坐标系的角度

可以理解为跟三角函数里的角度一样：

• 0deg 是 从左往右
• 90deg 是 从下往上
• 180deg 是 从右往左
• 270deg 是 从上往下

顺时针旋转，起点是左边 → 就是数学坐标的 x 轴方向。

---

Web 的渐变角度 = 时钟方向的角度

CSS 的渐变是这样算的：

• 0deg 是 从下往上
• 90deg 是 从左往右
• 180deg 是 从上往下
• 270deg 是 从右往左

简单记：时钟指针指向的方向就是渐变的方向。

---

顺带一提：Web 和 Android 的 margin/padding 顺序也不一样

CSS 中：

margin: 10px 20px 30px 40px;
/* 顺序是：上 右 下 左（顺时针）*/

而 Android 的顺序是：

android:padding="40dp 10dp 20dp 30dp"
/* 顺序是：左 上 右 ）*/

• Web 也是按照时钟顺序来的
• Android 这个可以理解为屏幕坐标系（左上角为原点）

---

总结

• Android 的渐变角度参考数学坐标系（0度是从左到右 → ）
• Web 的渐变角度参考时钟方向（0度是从下从上 ↑ ）