CSS渐变

CSS渐变允许你创建从一种颜色平滑过渡到另一种颜色的效果。渐变可以用作背景、边框和其他CSS属性的值，无需使用图像文件。

渐变类型

CSS支持两种主要的渐变类型：线性渐变和径向渐变。

线性渐变 (linear-gradient)

线性渐变是沿着一条直线从一个颜色过渡到另一个颜色。

基础语法

css 
.element {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

方向

可以使用关键字或角度来指定渐变的方向。

css 
/* 从上到下（默认） */
.element {
  background: linear-gradient(red, blue);
}

/* 从下到上 */
.element {
  background: linear-gradient(to top, red, blue);
}

/* 从左到右 */
.element {
  background: linear-gradient(to right, red, blue);
}

/* 从右到左 */
.element {
  background: linear-gradient(to left, red, blue);
}

/* 对角线 */
.element {
  background: linear-gradient(to bottom right, red, blue);
}

/* 使用角度 */
.element {
  background: linear-gradient(45deg, red, blue);
}

颜色停止点

可以指定多个颜色停止点，并可以设置它们的位置。

css 
/* 均匀分布的颜色停止点 */
.element {
  background: linear-gradient(red, yellow, green, blue);
}

/* 自定义位置的颜色停止点 */
.element {
  background: linear-gradient(red 0%, yellow 25%, green 75%, blue 100%);
}

/* 颜色停止点重叠 */
.element {
  background: linear-gradient(red 50%, blue 50%);
}

/* 透明渐变 */
.element {
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

径向渐变 (radial-gradient)

径向渐变是从一个中心点向外扩散的渐变效果。

基础语法

css 
.element {
  background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}

形状

可以指定渐变的形状：circle（圆形）或ellipse（椭圆形，默认）。

css 
/* 圆形渐变 */
.element {
  background: radial-gradient(circle, red, blue);
}

/* 椭圆形渐变（默认） */
.element {
  background: radial-gradient(ellipse, red, blue);
}

大小

可以指定渐变的大小：

  • farthest-corner（默认）：渐变扩展到最远的角落
  • closest-corner：渐变扩展到最近的角落
  • farthest-side：渐变扩展到最远的边
  • closest-side：渐变扩展到最近的边
css 
.element {
  background: radial-gradient(circle closest-side, red, blue);
}

位置

可以指定渐变的中心点位置。

css 
/* 默认位置：center center */
.element {
  background: radial-gradient(red, blue);
}

/* 自定义位置（关键字） */
.element {
  background: radial-gradient(at top left, red, blue);
}

/* 自定义位置（百分比） */
.element {
  background: radial-gradient(at 25% 75%, red, blue);
}

颜色停止点

与线性渐变类似，可以指定多个颜色停止点。

css 
/* 均匀分布的颜色停止点 */
.element {
  background: radial-gradient(red, yellow, green, blue);
}

/* 自定义位置的颜色停止点 */
.element {
  background: radial-gradient(red 0%, yellow 25%, green 75%, blue 100%);
}

重复渐变

可以使用repeating-linear-gradient和repeating-radial-gradient创建重复的渐变效果。

重复线性渐变

css 
.element {
  background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
}

重复径向渐变

css 
.element {
  background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
}

渐变应用

背景渐变

css 
.element {
  background: linear-gradient(to right, red, blue);
}

边框渐变

css 
.element {
  border: 5px solid transparent;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, red, blue) border-box;
}

文字渐变

css 
.element {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

浏览器兼容性

CSS渐变在现代浏览器中有很好的支持，但需要考虑旧版本浏览器的兼容性：

  • Chrome 26+
  • Firefox 16+
  • Safari 6.1+
  • IE 10+
  • Edge 12+

对于旧版本浏览器的支持，可以添加浏览器前缀：

css 
.element {
  background: linear-gradient(to right, red, blue);
  background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1-6 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1-12 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6-15 */
}

性能考虑

  • 渐变通常比图像文件更高效
  • 复杂的渐变可能会影响性能，特别是在移动设备上
  • 使用硬件加速可以提高渐变性能
css 
.element {
  transform: translateZ(0); /* 启用硬件加速 */
  background: linear-gradient(to right, red, blue);
}