3.7css渐变，字体，旋转

背景渐变

渐变类型

1. 线性渐变（Linear Gradient）

• ​语法：linear-gradient(方向, 颜色1, 颜色2, ...)
• ​方向控制：
  • 关键词：to top（上→下）、to bottom-left（左下→右上）、45deg（45度角）
  • 默认方向：to bottom（垂直向下）
• ​颜色停止点：通过 百分比 或 长度 定义颜色位置

  .linear {
    background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);
  }

2. 径向渐变（Radial Gradient）

• ​语法：radial-gradient(中心坐标, 半径, 颜色1, 颜色2, ...)
• ​参数说明：
  • cx/cy：圆心坐标（0~1 或像素值，默认50%）
  • r：半径（默认50%）
  • shape：circle（圆形）或 ellipse（椭圆，默认）

• .radial {
    background: radial-gradient(circle at center, #ffffff, #cccccc);
  }

3. 圆锥渐变（Conic Gradient，实验性）

• ​语法：conic-gradient(角度, 颜色1, 颜色2, ...)
• ​特点：围绕中心点按顺时针/逆时针旋转的渐变

  .conic {
    background: conic-gradient(90deg, #ff0000, #00ff00, #0000ff);
  }

---

​核心参数与技巧

1. ​颜色停止点（Color Stops）​

• ​精准控制：使用 offset 关键字明确位置

  background: linear-gradient(
    to right,
    red 0%,    /* 起始点 */
    yellow 50%, /* 中间点 */
    blue 100%   /* 结束点 */
  );

  </