css线性渐变与径向渐变区别

线性渐变颜色沿直线方向过渡，如background: linear-gradient(to right, red, yellow)；径向渐变从中心向外辐射，如background: radial-gradient(circle, blue, white)。二者方向、形状、参数和视觉效果不同，适用场景各异。

线性渐变和径向渐变是CSS中两种常用的渐变类型，它们在视觉效果和语法使用上有明显区别。

线性渐变（Linear Gradient）

线性渐变是颜色沿着一条直线方向过渡的渐变方式。颜色可以按上、下、左、右或对角线方向变化。

特点：

• 颜色沿一个方向平滑过渡
• 默认方向是从上到下
• 可以通过角度或关键词（如 to right、to bottom left）指定方向
• 适用于背景条纹、色带、模拟光照等场景

示例：

background: linear-gradient(to right, red, yellow);

径向渐变（Radial Gradient）

径向渐变是以一个中心点为起点，颜色向四周呈圆形或椭圆形扩散的渐变方式。

特点：

• 颜色从中心向外辐射状变化
• 形状可以是圆（circle）或椭圆（ellipse）
• 可设置中心位置（如 center、left top 等）
• 常用于创建光晕、焦点突出、按钮立体感等效果

示例：

background: radial-gradient(circle, blue, white);

主要区别总结

方向不同：线性渐变是直线方向过渡，径向渐变是中心向外扩散。

形状不同：线性渐变始终是矩形方向过渡；径向渐变可以是圆形或椭圆形。

参数设置不同：线性渐变用角度或 to + 方位词控制方向；径向渐变需定义形状、大小和中心点。

视觉感受不同：线性更规整、平面化；径向更具立体感和聚焦效果。

基本上就这些。根据设计需求选择合适的渐变类型，能让页面视觉更丰富自然。