|
今天介绍的是CSS3的渐变 ：linear-gradient 渐变在网页上应该算是很常见的一种效果。但是在CSS3出现之前，渐变效果必须使用图片才能做到。这就会出现问题了，就像之前说的圆角和阴影一样，因为使用了图片，在一定程度上影响网页的性能是肯定的，同时还有网站后期维护和修改的难题。CSS3的渐变诞生很久了，到目前为止，只要是支持该属性的浏览器，除了它们的私有前缀之外，其他写法都是一样的。
在刚开始的时候，在webkit下使用的是：
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则 而到现在，在webkit下使用的是： -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新书写语法 现在，新式语法与其他浏览器，包括firefox，opera的语法书写统一（现在的opera已经使用了webkit内核）； 其实gradient，分成两种一种是线性渐变（linear-gradient），另一种是径向渐变（radial-gradient）。我们可以将linear-gradient和radial-gradient添加到任何可以接受图片的属性，比如：backgorund-images，list-style-image等等。今天我要介绍的就是标题上的linear-gradient。 线性渐变 在我看来渐变的参数变化多端，有点复杂，所以先从简单的开始讲起
linear-gradient最简单的语法：
linear-gradient(起点，开始颜色，结束颜色);
起点表示渐变开始的位置，颜色是从开始颜色渐变到结束颜色。
渐变起点有很多种写法： 1、使用top，right，bottom，left中的一个来指定渐变的起点
.test{ background:-webkit-linear-gradient(top,#fff,#000); background:-moz-linear-gradient(top,#fff,#000); background:-o-linear-gradient(top,#fff,#000); background:linear-gradient(top,#fff,#000); } image 2、稍微复杂一点，可以使用top与left或者right组合，也可以使用bottom与left或者
right组合来改变渐变起点。但是切记：top不能和bottom组合，left不能和right组合
.test{ background:-webkit-linear-gradient(top right,#fff,#000); background:-moz-linear-gradient(top right,#fff,#000); background:-o-linear-gradient(top right,#fff,#000); background:linear-gradient(top right,#fff,#000); } image
.test{ background:-webkit-linear-gradient(bottom left,#fff,#000); background:-moz-linear-gradient(bottom left,#fff,#000); background:-o-linear-gradient(bottom left,#fff,#000); background:linear-gradient(bottom left,#fff,#000); } image 3、上面两种写法只能够画出有限的几种渐变。我们可以使用角度来设置渐变的起点。
以下面的代码为模板，将“0deg”修改成你想要的角度
.deg0{ background:-webkit-linear-gradient(0deg,#fff,#000); background:-moz-linear-gradient(0deg,#fff,#000); background:-o-linear-gradient(0deg,#fff,#000); background:linear-gradient(0deg,#fff,#000); } 我添加了12个div，以30deg为差值。
image
根据结果，我又画出了这张图
image
可以看出，在使用角度设定渐变起点的时候，0deg对应botton，90deg对应left，180deg对应top，360deg对应right。整个过程就是以bottom为起点逆时针旋转。
关于起点的内容我暂时只了解到这么多，以后如果草案做了修改，我了解之后会立马更新。
渐变颜色设置也可以花样繁多： 渐变的颜色可以不止两种，在起点颜色和终点颜色之间可以添加更多颜色。
.test{ background:-webkit-linear-gradient(top,#fff,red,#000,red); background:-moz-linear-gradient(top,#fff,red,#000,red); background:-o-linear-gradient(top,#fff,red,#000,red); background:linear-gradient(top,#fff,red,#000,red); } image 或者：
.test{ background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange); background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange); background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange); background:linear-gradient(top,red,yellow,blue,green,purple,orange); } image 上面的例子中，颜色的渐变都是均匀的，我们也可以给每一种颜色指点渐变的位置，从而使渐变不是单纯的均匀变化，这个也很简单，只要在你想修改的颜色后面加上渐变的文职就可以了。为了简单直观，我只用三种颜色。
均匀变化 .test{ background:-webkit-linear-gradient(red ,green,blue); background:-moz-linear-gradient(red ,green,blue); background:-o-linear-gradient(red ,green,blue); background:linear-gradient(red ,green,blue); } image
添加了位置后 .test{ background:-webkit-linear-gradient(red 50% ,green,blue); background:-moz-linear-gradient(red 50% ,green,blue); background:-o-linear-gradient(red 50% ,green,blue); background:linear-gradient(red 50% ,green,blue); } image
当然，如果颜色格式使用CSS3中的rgba格式，那么渐变将会是透明的。
关于线性渐变（linear-gradient）的介绍就到此为止了，有错误之处欢迎留言。
|