CSS3 渐变(Gradients)

以下是 CSS3 渐变(Gradients)的体系化解析：

一、基础分类与语法

1. 线性渐变 (Linear Gradient)

.box {
  background: linear-gradient(
    [方向] || [角度], 
    color-stop1, 
    color-stop2, 
    ...
  );
}

2. 径向渐变 (Radial Gradient)

.element {
  background: radial-gradient(
    [形状] [尺寸] at [位置],
    color-stop1,
    color-stop2,
    ...
  );
}

3. 重复渐变 (Repeating Gradients)

.repeat {
  background: repeating-linear-gradient(45deg, red 0%, blue 10%);
  background: repeating-radial-gradient(circle, #fff 0%, #000 15%);
}

二、核心参数详解

三、高级应用技巧

1. 多色渐变控制

.gradient-bar {
  background: linear-gradient(
    90deg,
    rgba(255,0,0,1) 0%,
    rgba(255,154,0,0.8) 25%,
    rgba(208,222,33,0.6) 50%,
    rgba(79,220,74,0.4) 75%,
    rgba(63,218,216,0.2) 100%
  );
}

2. 渐变叠加效果

.layer {
  background: 
    linear-gradient(120deg, #ff000033 20%, transparent 80%),
    radial-gradient(circle at 50% 0%, #00ff0055, #0000ff55);
}

3. 动态渐变动画

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-bg {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 300% 300%;
  animation: gradient-flow 8s ease infinite;
}

四、特殊场景实践

1. 文本渐变效果

h1 {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

2. 边框渐变实现

.gradient-border {
  border: 4px solid;
  border-image: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59) 1;
}

3. 3D 立体按钮

.button-3d {
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #f3f3f3 50%,
    #ededed 51%,
    #ffffff 100%
  );
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

五、性能与兼容性

1. 硬件加速：优先使用GPU渲染的渐变方式
2. 降级方案：

   .fallback {
     background: #2980b9; /* 旧浏览器的纯色背景 */
     background: linear-gradient(to right, #2980b9, #6dd5fa);
   }
   

3. 前缀处理：

   background: -webkit-linear-gradient(...);
   background: -moz-linear-gradient(...);
   

演进方向：配合 @property 规则实现自定义渐变属性的动态控制，通过 CSS Houdini 的 Paint API 创建复杂渐变模式。