CSS实现特殊背景效果

CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现，今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。

下面以webkit引擎下的线性gradient用法为例：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新线性渐变写法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

1. 对于最新的线性渐变规则，第一个参数为渐变的方向，top 是从上到下、left 是从左到右，若为left top则为从左上角到右下角，也可以设置为角度，表示从某个特定的角度开始，后面的参数则为起点颜色和终点颜色，也可以在中间加上中间点颜色。
2. 对于老式语法，type指的是渐变类型，linear（线性渐变）或radial（径向渐变），后面则依次为起点、终点位置，起点、终点颜色，中间也可加上中间点颜色，用color-stop()函数，有两个参数，第一个参数表示位置，0表示起点，0.5表示中点，1表示终点，第二个参数为颜色值。

下面介绍三个例子，所有例子都采用如下html语句：

<div