CSS3渐变笔记(上)

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/T_revolution/article/details/51871005

CSS3 渐变（gradients）可以让我们设置颜色的平稳过度。据我所知，有线性渐变（Linear Gradients）和径向渐变（Radial Gradient）两种。

而它们也跟它们的名字一样，线性渐变是从一个固定的方向进行渐变，而径向渐变，则是呈椭圆（圆）从中心向四周扩散。

先看下线性渐变linear-gradient：

<linear-gradient>=linear-gradient([[<angle>|to<side-or-corner>],]?<color-stop>[,<color-stop>]+)

<side-or-corner>=[left|right]||[top|bottom]

<color-stop> = <color>[<length>|<percentage>]?

这里引用的是CSS手册中linear-gradient的语法。

我第一次看到这种东西的时候是一脸懵逼的，所以我简单的说一下这东西怎么读，清楚CSS语法的人可以略过。

“[]”表示这里面填的是一个字符串。

“<>”里表示此处应该填什么东西。例如<color>指的就是这里填的是颜色。

而“|”则表示或，例如left|right 就指填left或right

“||”则指两边任选一或者都选，<side-or-corner>=[left|right]||[top|bottom]

就指<side-or-corner>可以是left,right,top,bottom,left top,right bottom等等。

“？”修饰前面的字符串，表示可以为0或可以为1，即这个字符串可以不填。

“+”表示后面可以添加一个或者多个同类型的字符串。

 

我们来看看linear-gradient的简单用法。

background:linear-gradient(to top,red,blue);

从图片就可以清楚看出颜色由下往上渐变，同理

background:linear-gradient(to top left,red,blue);

 

若用角度表示 background:linear-gradient(0deg,red,blue);

 

若用角度表示 background:linear-gradient(45deg,red,blue);

 

这个角度就是旋转的角度。

以此类推。

 

角度的单位是deg，用角度确定方向比起用top,left等等的词汇更加灵活，能有更多的变化

例如background:linear-gradient(100deg,red,white,blue);

这里的白线就能很直观的看出变化的方向。

 

我们来看看后面的颜色部分

background:linear-gradient(100deg,red,white,blue);

中颜色可以添加，但如果我们要控制各种颜色所占的范围，那么就要给颜色一个终止值。

这个值可以为百分比，也可以为固定数值。

例如background:linear-gradient(100deg,red,white 20%,blue);

 

background:linear-gradient(100deg,red,white 80%,blue);

 

终止位置指到这个位置时渐变为这个颜色。

通过这个原理，我们可以制作很多东西。

例如一个多段颜色组成的分隔条。

 

 background:linear-gradient(100deg,red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,blue 80%,blue 100%);

这里面red 0%和blue 100%都可以省略不要，并不会影响。渐变默认由最开始的颜色开始，由结尾的颜色结束。

 

 

     当然linear-gradient不仅仅只能做这一些简单的东西，通过相互组合，我们可以做出很多效果。

     例如网格背景

 background: linear-gradient(to left,transparent 20px,#92baac 20px,#92baac 22px,transparent 22px,transparent 42px,#92baac 42px,#92baac 44px),

linear-gradient(to bottom,transparent 20px,#92baac 20px,#92baac 22px,transparent 22px,transparent 42px,#92baac 42px,#92baac 44px);

background-color: white;

background-size: 44px 44px;

 

再举一个例子（素材来自于：http://lea.verou.me/css3patterns/）

background: linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,

linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),

linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);

background-color:#e1ebbd;

background-size: 128px 128px;

效果是这样的。

我们来分解一下代码。

分解：background:linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px;

 

这里的linear-gradient后面多了64px 64px

表示的是图案的偏移，去掉就是下图。

后面的偏移量表示的是向右，向上的值

 

linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px)

 

linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px)

 

尝试着两两组合，你会发现位于上面的linear-gradient会覆盖位于下面的linear-gradient。用这个方法，我们就可以做出很多的效果。