CSS3之美(十):渐变

使用 CSS3 的渐变我们可以使背景在两种甚至更多颜色之间平滑过渡地显示。在这之前,我们只能通过图片来实现相同效果。现在,同样的效果,我们通过使用 CSS3 技术既减少了下载时间又节省了服务器带宽和用户流量。另外,使用渐变的元素在被放大时效果看起来更好,因为渐变是通过浏览器原生呈现的。

注意,使用渐变效果依据的是 background-image 属性。

CSS3 支持两种渐变:

  1. 线性渐变
  2. 径向渐变

关于渐变的浏览器兼容,绝对是个坑,下文我们就会见到。

线性渐变

线性渐变是各种颜色跨过直线上两点之间的距离所产生的一种逐步的过渡。其语法如下:

1
E { background-image: linear-gradient(direction, color1, color2, ...); }

其中:

  • direction 表示渐变所沿的直线方向
  • color 表示渐变中从起始位置到结束位置经过的颜色值,这个颜色可以使用 RGBA、HSLA 等 CSS3 所支持的各种颜色表示方法。

从上到下

渐变语法中的 direction 值如果不指定的话,那么渐变默认是从顶部到底部的。示例:

1
2
3
div {
backgrouond-image: linear-gradient(red, yellow);
}

上面代码的效果是元素其顶部到底部之间呈现由红色逐渐平滑过渡到黄色的状态。

由于浏览器历史问题,渐变有着各种奇怪的浏览器实现,我们的跨浏览器代码如下:

1
2
3
4
5
6
7
div {
background-color: red; /* 兼容不支持渐变的浏览器 */
background-image: -webkit-linear-gradient(red, yellow);
background-iamge: -o-linear-gradient(red, yellow);
background-image: -moz-linear-gradient(red, yellow);
background-iamge: linear-gradient(red, yellow); /* 标准语法 */
}

从左到右

默认的渐变方向是从元素顶部到底部,如果我们需要从做到右的渐变怎么办呢?这个时候,就是 direction 所提供的值在起作用了,看下面这个示例:

1
2
3
4
5
6
7
div {
background-color: red;
background-image: -webkit-linear-gradient(left, red, yellow);
background-image: -o-linear-gradient(right, red, yellow);
background-image: -moz-linear-gradient(right, red, yellow);
background-image: linear-gradient(to right, red, yellow); /* 标准语法 */
}

上面的代码实现的便是从左到右的渐变,看到了那一串奇怪的浏览器兼容代码吧,很恶心有木有?那是由于历史原因造成的,我们不必在意,历史的车轮滚滚向前,我们应该放眼未来。

线性渐变 linear-gradient 支持一种名为 to 语法的方向控制,它允许我们使用关键字来控制渐变所沿的方向,这个关键字代表的就是渐变方向。例如,to left 表示从右向左的渐变方向。

to 语法所允许的关键字如下:

  • right
  • left
  • top
  • bottom
  • bottom right
  • bottom left
  • top right
  • top left

沿着对角线

我们使用 to 语法来实现沿着对角线的渐变,跨浏览器代码如下;

1
2
3
4
5
6
7
div {
background-color: red;
background-image: -webkit-linear-gradient(left top, red, yellow);
background-image: -o-linear-gradient(bottom right, red, yellow);
background-image: -moz-linear-gradient(bottom right, red, yellow);
background-image: linear-gradient(to bottom-right, red, yellow); /* 标准语法 */
}

沿着指定角度

如果我们想更精确地控制渐变的方向,可以通过指定角度参数,而不是使用仅仅提供了几个关键词的 to 语法。指定角度控制线性渐变的语法如下:

1
E { backckgrounde-image: linear-gradient(angle, color-stop1, color-stop2,...); }

角度可以使用几种不同的单位来声明:取值与单位模块允许使用度数、梯度、弧度与转数去指定角度。一般,我们都使用角度,比较好理解嘛。angle 值设置了渐变的角度:

  • 0deg(360deg): 从下到上
  • 45deg: 从左下角到到右上角
  • 90deg: 从左到右
  • -90deg: 从右到左

大于零的度数值表示以竖直轴顺时针旋转,小于零的度数值表示以竖直轴逆时针旋转。不难看处,xdeg(x<0)与 (360-|x|)deg 是等效的。

示例如下,下面是一个从右到左的渐变。

1
2
3
4
5
6
7
div {
background-color: red;
background-image: -webkit-linear-gradient(-90deg, red, yellow);
background-image: -o-linear-gradient(-90deg, red, yellow);
background-image: -moz-linear-gradient(-90deg, red, yellow);
background-image: linear-gradient(-90deg, red, yellow); /* 标准语法 */
}

使用多个 color 值

使用多个 color 值,很好理解,即渐变是按照多种颜色出现的先后顺序逐渐变化过渡的。下面是一个示例:

1
2
3
4
5
6
7
div {
background: red;
background-iamge: -webkit-linear-gradient(red, yellow, green);
background-iamge: -o-linear-gradient(red, yellow, green);
background-iamge: -moz-linear-gradient(red, yellow, green);
background-iamge: linear-gradient(red, yellow, green);
}

上面代码的结果即是呈现从上到下的红黄绿三色逐渐过渡的渐变。

重复一个线性渐变

如果我们需要重复一个线性渐变,可以使用 repeating-linear-gradient 语法。其语法如下:

1
E { background-image: repeating-linear-gradient(direction, color1, color2, ..., to-stop); }

奇怪,看起来和普通的线性渐变的语法没什么太大区别呀。二者的唯一区别在于重复线性渐变中 color 颜色值后面可以跟一个长度值或者百分比值,如果一旦出现了这样的颜色值,那么它跟它之前的颜色就会被解释为一个渐变,这个数值也被解释为这个渐变的长度。另外,重复线性渐变中所重复的单位线性渐变长度是由其表达式中最后一个 color 后面的数值决定。

下面是一个示例:

1
2
3
4
5
6
7
div {
background-color: red;
background-iamge: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
background-iamge: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
background-iamge: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-linear-gradient(red, yellow 10px, green 20px);
}

上面代码的意思是,在 div 中所重复的单位线性渐变的长度为 20px。在这个 20px 长的单位线性渐变中,还可以分为:

  • 先是红色到黄色的 10px 长的渐变
  • 然后是黄色到绿色的 10px 长的线性渐变。

径向渐变

径向渐变是以一个点为中心,向四周成放射状地在各种颜色之间逐步进行过渡。其语法如下:

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

其中,属性值各个参数的意义如下:

  • shape: 用于设定整个渐变是在圆形还是椭圆形中逐变化,值可以是:

    • circle: 表示圆形的径向渐变
    • ellise: 默认值,即椭圆形的径向渐变
  • size: 用于设置径向渐变到何处停止,默认是 farthest-corner,可选的值有:

    • closest-corner 渐变会在最接近起始位置的角停止
      • closest-side 渐变在最接近起始位置的边停止
      • farthest-corner 渐变会在距起始位置最远的角停止
      • farthest-side 渐变会在距起始位置最远的边停止
  • position: 用于设置渐变起始时的位置,如果提供两个参数,第一个为横坐标,第二个表示纵坐标;如果仅提供一个参数,第二个参数默认为 50% ,即 center。其默认值为 center ,即在中心处,我们可以使用 at 语法后跟关键字或者是长度值/百分比值来指定,其中可选的关键字有:

    • center
    • top <==> top center
    • bottom <==> bottom center
    • left <==> left center
    • right <==> right center
    • top right
    • top left
    • top center
    • bottom left
    • bottom right
    • bottom center

下面是一个例子

1
2
3
4
5
6
div {
background-image: -webkit-radial-gradient(circle farthest-side at 60% 50%, red, yellow, blue);
background-image: -o-radial-gradient(circle, farthest-side at 60% 50%, red, yellow, blue);
background-image: -moz-radial-gradient(circle farthest-side at 60% 50%, red, yellow, blue);
background-image: radial-gradient(circle, farthest-side at 60% 50%, red, yellow, blue);
}

上面代码的效果是产生一个红黄绿颜色的圆形径向渐变,以元素的左上角为参考点,该圆心坐标是(60%, 50%),该径向渐变从圆心处开始到距圆心最远的角落处停止。

重复径向渐变

重复径向渐变的语法与重复线性渐变类似,其语法如下:

1
E { repeating-radial-gradient(shape size at position, color1, ..., to-stop); }

与普通径向渐变的语法没什么太大的区别,区别主要在于最后一个 color 值后面会跟一个长度值后者百分比值用于指定重复的径向渐变中单位径向渐变的半径范围。

示例如下:

1
2
3
div {
repeating-radial-gradient(circle, black, white 20px);
}

上例创建了一个黑白径向渐变,每隔 20px 重复一次。