1. 线性渐变 (linear-gradient)

• 线性渐变是沿着一条直线上从一种颜色平滑过渡到另一种颜色的效果。
• 语法：linear-gradient(direction, color-stop1, color-stop2, ...)
• 示例：linear-gradient(to right, red, blue) 从左到右，红色逐渐过渡到蓝色。

2. 径向渐变 (radial-gradient)

• 径向渐变是从中心向外扩展的圆形或椭圆形的渐变效果。
• 语法：radial-gradient(shape size at position, start-color, ..., end-color)
• 示例：radial-gradient(circle at center, red, blue) 在中心从红色渐变到蓝色。

3. 渐变方向

• 对于 linear-gradient，方向可以是角度（例如，45deg）或方位词（例如，to right）。
• 对于 radial-gradient，位置由 at x% y% 指定，表示渐变中心的位置。

4. 颜色停止点 (color-stop)

• 渐变中的每个颜色停止点指定了颜色和渐变位置。
• 颜色可以使用 rgba()、hsla() 或其他 CSS 颜色函数。

5. 透明度

• 可以通过 rgba 或 hsla 指定颜色的透明度（alpha 值）。这使得背景颜色与渐变更好地混合在一起，创造出复杂的视觉效果。

radial-gradient(at 17% 0%, hsla(281deg, 0%, 94%, 1) 0, transparent 50%)

• 渐变中心位置：元素的 17% 水平位置和 0% 垂直位置。
• 渐变开始颜色：hsla(281deg, 0%, 94%, 1)，表示浅灰色，完全不透明。
• 渐变结束颜色：transparent，表示完全透明。
• 渐变过渡范围：从中心到50%的径向范围内完成颜色的渐变。