CSS3 渐变效果

CSS3之前入过要实现两种不同颜色之间渐变效果背景通常只能通过图片来实现。现在，通过CSS3中的渐变就可以实现该效果，而且元素的放大缩小都不会影响效果展现，比图片好太多。

CSS3渐变有两种类型：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变相关属性：background-image。

CSS3 线性渐变

创建线性渐变，需要定义至少两个色标。色标是要呈现平滑过渡的颜色。还可以设置起点和方向（或角度）以及渐变效果。

语法

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

线性渐变 – 从上到下（默认）

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

示例

#grad {
  background-image: linear-gradient(red, yellow);
}

线性渐变 – 从左到右

下面的例子展示了从左开始到右的线性渐变。它从红色开始，过渡到黄色：

示例

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

线性渐变 – 对角线

您可以通过指定水平和垂直起始位置来实现对角渐变。

下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：

示例

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

这个角度指定水平线和渐变线之间的角度。

下面的例子展示了如何在线性渐变上使用角度：

示例

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用多个色标

下面的例子展示了带有多个色标的线性渐变（从上到下）：

示例

#grad {
  background-image: linear-gradient(red, yellow, green);
}

下面的例子展示了如何使用彩虹色和一些文本创建线性渐变（从左到右）：

示例

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

使用透明度

CSS3中的渐变支持透明度设置，所以也可用于创建渐变效果。

加入需要添加透明度，我们可以使用 rgba()函数来定义色标。rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：

示例

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

示例

下面是重复的线性渐变的示例：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 径向渐变

径向渐变是一种以中心点向外扩散的一种渐变。

创建径向渐变，你需要至少定义两种颜色，这两种颜色定义了渐变的起始颜色和结束颜色。当然，多余定义多于两个的颜色，渐变的过程就是颜色不见变换的过程。

渐变CSS语法如下：

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

默认情况下，不设置任何图形值情况下，shape 为椭圆形，size 为最远角，position 为中心。

示例

#grad {
	background-image: radial-gradient(red, yellow, green);
}

径向渐变-不同间距的颜色

下面的例子展示了一个径向渐变，其颜色之间的间隔不同：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

下面的例子展示了一个圆形的径向渐变：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

使用设置大小的关键字

size 参数定义渐变的大小。它可接受四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

示例

设置了不同 size 关键词的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

示例

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}