CSS3 linear-gradient 线性渐变用法详解：方向、角度与多色标

linear-gradient 是现代 Web 页面背景、卡片高光与按钮拟物渐变最常用的 CSS 函数。本文系统梳理方向关键词、旋转角度与多色标位置控制。

一、 常用方向与角度语法

/* 1. 经典双色对角渐变（从左上到右下） */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 2. 方向关键词语法 */
background: linear-gradient(to right, #ff416c, #ff4b2b);

/* 3. 多色标等分条纹背景（硬边缘渐变） */
background: linear-gradient(to right, #3498db 50%, #2ecc71 50%);