关于 CSS 线性渐变角度(linear-gradient 角度含义及记忆方法)

在 CSS 的 linear-gradient 语法中,角度的计算是有规律的:

  • 0deg:渐变角度为0度,表示渐变线"从下到上"------也就是颜色从底部开始到顶部结束。
  • 90deg:渐变线"从左到右"------颜色从左边过渡到右边。
  • 180deg:渐变线"从上到下"------颜色从顶部到底部。
  • 270deg:渐变线"从右到左"。

记忆规律:

  • 角度是顺时针方向计算的(以顶端为0°起点)。

  • 你可以这样记:

    • 0deg:垂直向上(底→顶)
    • 90deg:水平向右(左→右)
    • 180deg:垂直向下(顶→底)
    • 270deg:水平向左(右→左)

所以,180deg 通常用于从上到下的渐变,刚好和 0deg 相反。

小技巧

你可以想象钟表:12点方向是0deg/360deg,3点是90deg,6点是180deg,9点是270deg。

这样理解后,其他任意角度(比如45deg、135deg等)也能按顺时针方向推出。

相关推荐
-凌凌漆-10 分钟前
【npm】npm的-D选项介绍
前端·npm·node.js
鹿心肺语32 分钟前
前端HTML转PDF的两种主流方案深度解析
前端·javascript
Lee川35 分钟前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
海石1 小时前
去到比北方更北的地方—2025年终总结
前端·ai编程·年终总结
一个懒人懒人1 小时前
Promise async/await与fetch的概念
前端·javascript·html
Mintopia1 小时前
Web 安全与反编译源码下的权限设计:构筑前后端一致的防护体系
前端·安全
输出输入1 小时前
前端核心技术
开发语言·前端
Mintopia1 小时前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
林深现海2 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多2 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端