速查在线工具箱CSS 渐变的角度为什么和直觉反着来？
零度指向「上」，角度顺时针增加。所以九十度才是从左到右，而不写方向时的默认值是零度再加半圈。
直接答案
角度的参考方向是向上，零度表示从下往上；角度按顺时针增长，于是九十度是从左到右，一百八十度是从上往下。日常直觉里的向右对应九十度，不是零度。
不写方向的默认值等价于一百八十度，因为最符合直觉的渐变就是自上而下。用关键字写法（向上、向右等）比记角度更不容易出错。
色标位置是沿渐变线投影算出的百分比。渐变线的长度经过特别选取，使起点与终点所在的两条垂线刚好穿过容器对角，所以同一组百分比在长方形与正方形里的视觉落点并不相同。
写渐变时最常出现的两种困惑：为什么零度不是从左到右，以及为什么同一段代码换个容器比例看起来就变了。这两个问题都源于同一套几何约定。
这一篇把角度、色标与渐变线长度的关系摊开讲，并用对照表把常用写法固定下来。
1角度与关键字对照
记住零度朝上、顺时针增加这一句，其余角度都能推出来。
| 角度 | 等价关键字 | 方向 |
|---|---|---|
| 0 度 | to top | 由下往上 |
| 90 度 | to right | 由左往右 |
| 180 度 | to bottom（缺省值） | 由上往下 |
| 270 度 | to left | 由右往左 |
| 45 度 | to top right 一类 | 斜向，指向右上角方向 |
角度是渐变线的走向，不是光从哪来。把它当成从起点指向终点的一条射线更容易记。
2色标位置与硬边
色标决定颜色在某处出现，相邻两个色标重合时不做插值，直接切换，这就是硬边的来源。
| 写法 | 效果 | 备注 |
|---|---|---|
| 两个百分比不等 | 在这两点之间平滑过渡 | 常规用法 |
| 两个百分比相同 | 在该处出现一条硬边 | 做条纹与色带的常用手法 |
| 只写一个色标 | 另一侧自动补到端点色 | 省略的部分按端点颜色延伸 |
| 位置超出区间范围 | 端点颜色被延伸或压缩 | 可以制造突兀的分界 |
想要规则条纹，相邻同名色标的位置差要固定，否则条纹宽窄会随容器变化。
3重复渐变与容器比例
- 重复渐变
- 图案按一个周期在整条渐变线上循环铺满，适合做条纹底纹
- 周期多长
- 由相邻同名色标的间距决定，间距越小条纹越密
- 条纹倾斜
- 给渐变加角度即可让条纹倾斜，倾斜后的等距性依赖容器比例
- 常见坑
- 容器比例一变条纹宽度就变，需要用固定长度色标而不是百分比来稳定
凡是要做与容器尺寸无关的图案，都用固定长度色标或重复渐变，别用百分比。
顺着这个问题往下用
全部工具总览 →相关疑问
为什么不写方向时是自上而下？
这是缺省值，等价于一百八十度。它是最常见的使用方式，因此被设为默认。
色标写成负数有效吗？
有效。超出范围的色标会被端点颜色延伸或压缩，可以借此做出突变的分界。
为什么我的渐变在宽屏和窄屏上看起来不一样？
渐变线长度随容器变化，百分比色标的落点也随之移动。想做尺寸无关的图案，改用固定长度色标或重复渐变。
关键字写法支持斜角吗？
支持，写两个方向关键字即可指向对角，浏览器会自动选取合适的渐变线。
继续看：相关问题与资料
全部问题解答 →
内容标识：本页内容由人工智能辅助生成，并经人工核对与编辑。详见 人工智能生成内容标识说明。
内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-10。若发现错误，欢迎通过页脚反馈入口告知。
内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-10。若发现错误，欢迎通过页脚反馈入口告知。