以0deg为起点,探讨CSS线性渐变的方向

0deg 在 CSS linear-gradient 中表示渐变方向"从下到上" ,也就是颜色从元素底部开始,往顶部渐变。

记忆方法如下:

  • 标准语法下(不加浏览器前缀) :

    • 0deg :从下往上(对应 to top)
    • 180deg :从上往下(对应 to bottom,为默认方向)
    • 90deg :从左往右(对应 to right)
    • 270deg :从右往左(对应 to left)

速记口诀:

  • 记住角度是"顺时针旋转",而 0deg 基准线是"从下到上"。
  • 也可以联想秒表:0度向上,90度向右,180度向下,270度向左。

角度与英文方向映射表:

角度 英文方向 颜色渐变方向
0deg to top 下→上
90deg to right 左→右
180deg to bottom 上→下
270deg to left 右→左

补充说明:早期某些浏览器前缀写法方向会不同,但现代标准写法(无前缀)就是上述对应关系。

这样记忆,遇到 0deg 就直接联想到"下到上"即可。

相关推荐
天天喝旺仔1 分钟前
浏览器渲染原理:从解析 HTML/CSS、构建渲染树到重排重绘与首屏优化
前端·javascript·css·性能优化·html
明月_清风2 分钟前
前端已死?别急,这可能只是所有行业的开始
前端·ai编程
明月_清风6 分钟前
干了 6 年前端,我是怎么一步步转型到 AI 的?
前端·后端·ai编程
乘风gg8 分钟前
花了 100 亿 Token 后,我发现 Code is cheap 是最大的谎言
前端·ai编程·claude
IMPYLH9 分钟前
HTML 的 <textarea> 元素
前端·html
吴声子夜歌9 分钟前
HTML——庞杂的表单控件元素(二)
前端·html
吴声子夜歌11 分钟前
HTML——无障碍访问(一)
前端·html
代码无边,回头是岸12 分钟前
allfile‑preview|一款适配局域网,开箱即用的前端统一文件预览方案
前端
曹牧35 分钟前
Spring MVC : Controller 层URL划分
java·运维·服务器·前端
njsgcs1 小时前
safari局域网读电脑地址,第一次读的到,重载之后就不行,得重启。.local解决办法
前端·电脑·safari