0deg 在 CSS linear-gradient 中表示渐变方向"从下到上" ,也就是颜色从元素底部开始,往顶部渐变。
记忆方法如下:
-
标准语法下(不加浏览器前缀) :
- 0deg :从下往上(对应
to top
) - 180deg :从上往下(对应
to bottom
,为默认方向) - 90deg :从左往右(对应
to right
) - 270deg :从右往左(对应
to left
)
- 0deg :从下往上(对应
速记口诀:
- 记住角度是"顺时针旋转",而 0deg 基准线是"从下到上"。
- 也可以联想秒表:0度向上,90度向右,180度向下,270度向左。
角度与英文方向映射表:
角度 | 英文方向 | 颜色渐变方向 |
---|---|---|
0deg | to top | 下→上 |
90deg | to right | 左→右 |
180deg | to bottom | 上→下 |
270deg | to left | 右→左 |
补充说明:早期某些浏览器前缀写法方向会不同,但现代标准写法(无前缀)就是上述对应关系。
这样记忆,遇到 0deg
就直接联想到"下到上"即可。