css3渐变(Gradient)

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

    渐变分为:线性渐变(Linear Gradient)和径向渐变(Radial Gradient),线性渐变通过控制角度或者方向(向下/向上/向左/向右/对角方向)实现变换,径向渐变由中心定义。

    现在主流浏览器有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(IE)。css Gradient在IE下也可以实现,但需要通过IE特有的滤镜来实现。

    线性渐变

    实例讲解gradient做的盒子边框

    盒子渐变
    在这个例子中,我们只看到了盒子边框有渐变效果,那么这是怎么做的呢?实际就是一个小盒子,一个大盒子,小盒子是中间那个空白区域,大盒子是包括边框和内如空白区域的部分。然后通过设置小盒子的z-index大于大盒子的z-index,使大盒子中间部分被小盒子的白色遮盖,这么看来,也就得到了边框渐变。代码如下:

    1
    2
    3
    <div class="box first"></div>
    <div class="box second"></div>
    <div class="box third"></div>

    css如下,注意大盒子的宽和高都比小盒子大20px,是通过定位使两个小盒子在大盒子的中间。:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    .box {
    margin: 80px 30px;
    width: 200px;
    height: 200px;
    position: relative;
    background: #fff;
    float: left;
    }
    .box:before {
    content: '';
    z-index: -1;
    position: absolute;
    width: 220px;
    height: 220px;
    top: -10px;
    left: -10px;
    }
    .first:before {
    background-image: linear-gradient(90deg, yellow, gold);
    }
    .second:before {
    background-image: linear-gradient(0deg, orange, red);
    }
    .third:before {
    background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
    }


    Gradient在webkit和mozila浏览器中语法介绍

    线性渐变在Mozila下的应用

    1
    background: -moz-linear-gradient( top,#ccc,#000);

    共三个参数:第一个参数表示渐变的方向,如top是从上到下,left是从左到右,left top从左上到右下。第二个和第三个参数分别是起点颜色和终点颜色,你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:
    mozila

    线性渐变在Webkit下的应用

    -webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

    1
    background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

    旧方法

    1
    -webkit-linear-gradient(top,#ccc,#000);

    新方法

    还有几种浏览器是opera和trident就不介绍了,仿照下面写,详细可以看w3cplus详细的介绍

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ace, #f96);
    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
    background: -webkit-gradient(linear,top,from(#ace),to(#f96));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ace, #f96);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ace, #f96);

    结果如下

    其中的方向当然也可以是角度:当指定的角度,请记住,‘0deg’指向上面,同时正角度顺时针旋转,因此‘90deg’指向右边。
    角度理解from 张鑫旭
    (代码举例)当设置为30deg时:

    1
    2
    3
    4
    5
    6
    7
    8
    #grad5 {
    height: 100px;
    width:20%;
    background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(30deg, red, blue); /* 标准的语法(必须放在最后) */
    }

    角度变化

    径向渐变

    实例1:

    1
    2
    background: -moz-radial-gradient(#ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

    均匀渐变
    实例2:

    1
    2
    background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
    background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

    非均匀渐变
    从以上俩个示例的代码中发现,他们起止色想同,但就是示例二定位了些数据,为什么会造成这么大的区别呢?其实在径向渐变中虽然具有相同的起止色,但是在没有设置位置时,其默认颜色为均匀间隔,这一点和我们前面的线性渐变是一样的,但是设置了渐变位置就会按照渐变位置去渐变,这就是我们示例一和示例的区别之处:虽然圆具有相同的起止颜色,但在示例一为默认的颜色间隔均匀的渐变,而示例二每种颜色都有特定的位置。
    实例3:

    1
    2
    background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
    background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

    中心不同
    这里设置中心位置不同,并且形状似圆形,若是设置为椭圆(ellipse),会有不一样的效果。

    如果您想重复一个渐变,您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。 在下面的例子,每个实例都指定了两个起止颜色,并无限重复。

    1
    2
    3
    4
    background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
    background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
    background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
    background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

    效果如下:
    radial
    linear

    推荐&&感谢w3cplus文章