CSS3 渐变

CSS3 渐变是使用 linear-gradient() 或 radial-gradient() 函数创建的。

线性渐变（Linear Gradients）：




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

示例：




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

径向渐变（Radial Gradients）：




.radial-gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

示例：




div {
  background: radial-gradient(circle, red, yellow, green);
}

方向可以用角度或方位词（如 to top, to right 等）来指定。径向渐变的形状可以是 circle 或 ellipse，大小可以设置为 closest-side, farthest-side, closest-corner, farthest-corner, 或者特定的宽度和高度。位置决定渐变的中心点，可以是百分比或具体像素值。

评论已关闭

推荐阅读