渐变是
CSS3
中的一个新特性,可以让我们更加快速的实现在页面中的渐变色效果,以前我们只能通过图像设置为背景图片来实现此效果。
CSS3
渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。因为渐变是由浏览器生成的,因此其效果在放大之后看起来也很舒服。
注意:IE9及之前版本不支持渐变。
# 渐变
CSS3
定义了两种类型的渐变:
- 线性渐变
- 向下
- 向上
- 向左
- 向右
- 对角方向
- 径向渐变
# 线性渐变
为了创建一个线性渐变,需要定义至少两种颜色节点,另外还可以设置一个起点和方向(或者角度)。
线性渐变不指定方向,默认从上向下。方向包含top
、bottom
、left
、right
,对角时,选择两个方向即可,则是对角线方向渐变。
/* 线性渐变 */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
1
2
2
角度是指水平线和渐变线之间的角度,逆时针方向计算。
即:0deg
将创建一个从下到上的渐变;90deg
将创建一个从左到右的渐变。
注:部分浏览器使用的是旧版规则,可能渐变色方向不一样。
/* 使用角度,而非方向 */
background-image: linear-gradient(angle, color-stop1, color-stop2);
1
2
2
使用透明度(transparent)
CSS3 渐变也支持透明度(transparent),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba()
函数来定义颜色节点。rgba()
函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
1
2
3
2
3
重复的线性渐变:repeating-linear-gradient()
函数用于重复线性渐变
#grad {
/* 标准的语法 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
1
2
3
4
2
3
4
# 径向渐变
径向渐变由其中心定义,并且至少要定义两个颜色节点。
可以指定渐变的中心、形状、大小。
background-image: radial-gradient(shape , size at position, start-color, ..., last-color);
1
- 颜色分布:在颜色后面指定百分比来使颜色不均匀分布
- 形状设置:
circle
(圆形)和ellipse
(椭圆形) - 渐变大小:
closest-side
、farthest-side
、closest-corner
、farthest-corner
重复的径向渐变:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
1
# 渐变色选择
几个有趣的的渐变色背景分享网站:
渐变色参考网站还有很多,不过这几个也够用了。