使用CSS渐变

使用CSS 渐变 是在 CSS3 Image Module 中新增加的 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变:线性渐变 (linear),通过 linear-gradient 函数定义,以及 径向渐变 (radial),通过 radial-gradient 函数定义.

线性渐变

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

简单线性渐变

这里是一个线性渐变从中间(水平方向)和顶部(垂直方向)开始,起始于蓝色,过渡到白色.

1
2
3
4
5
/* 旧语法,带前缀并且已经废弃,以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white);
/* 新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
background: linear-gradient(to bottom, blue, white);

改变相同的渐变从左到右运行:

1
2
/* 新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
background: linear-gradient(to right, blue, white);

可以同时指定水平方向和垂直方向的起始点使渐变对角线式的运行:

1
2
/* 新语法,不带前缀,以支持标准兼容的浏览器(Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1) */
background: linear-gradient(to bottom right, blue, white);

使用角度

如果你不指定一个角度,这个将自动基于给定的方向。如果你更喜欢控制渐变的方向,你可以设置特定的角度。

例如,这两个渐变,第一个方向朝右,第二个有个70度的角。

linear_gradient_angle.png

右边的这个使用的是这样的CSS样式:

1
background: linear-gradient(70deg, black, white);

色标

linear-grandient可以填写多于两个颜色,这样可以形成多个颜色的渐变。默认情况下每个颜色都占均等的宽度,但在颜色后面可以指定一个从0-100的百分数,来指定当前颜色的渐变位置。第一个颜色的位置默认为0, 最后一个默认为100

1
background: linear-gradient(to right, red, blue 20%,black);

透明和渐变

渐变是支持透明度的。 举个例子,当你叠加多个背景层,你可以使用这个在背景图片上来创建淡入淡出的效果 :

for Transparency and gradients example

1
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

径向渐变

径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 除了你可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致。

1
background: radial-gradient(red, yellow, rgb(30, 144, 255));

重复的渐变

linear-gradientradial-gradient不支持自动重复的色标。然而, repeating-linear-gradientrepeating-radial-gradient 可以实现这个功能。

1
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

参考文档

Demo