CSS中 -gradient && background

linear-gradient 线性渐变 && radial-gradient 径向渐变

linear-gradient与radial-gradient都是background-image的属性值。也就是这两种渐变层都是在background-color之上的，涉及到background的 层级 后面再对background层级的概念做回顾。

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> ]?

我先解释一下这个语法的意思，用最能理解的方式来解释。
linear-gradient后面需要有圆括号，括号里面写的是参数；其中开头指定渐变的方向，默认的是垂直向下的 ↓ 可以是to top或者to right…从字面的意思就很好理解，就不赘述。接着是渐变颜色的变化，要用“,”与前面的渐变方向隔开，填写颜色的同时可以填写颜色的位置，可以用px也可以用“%”百分比与颜色值中间用空格隔开；如果有多多重渐变，颜色值之间用逗号“,”隔开。talk is cheap show me the code

共有的样式box的css代码如下：

<div class="box b1"></div>

.box{
    width:10em;
    height:10em;
    border:1px solid;
    margin:10em auto;       
}

我们先看下不写方向时候，默认的样式

.b1{
    background-image:linear-gradient(#fff 0,#fff 30%,red 30%,red 60%,#000 60%,#000);
}

默认状态，不写方向的话，我们可以这么理解么，根据所写的颜色先后顺序，方向从上到下进行渐变。

其实上面的代码我们可以做出优化：

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。 ——css图像（第三版）
这就意味着，我们把第二个及以后的色标的位置值设置为0，那它的位置就总会被浏览器调整为前一个色标的位置值，这个结果正是我们想要的。——《css揭秘》

接下来我们将上面css代码进行优化：第二个色标red，第三个色标#000，起始位置设置为。（接下来我们统一使用优化后的代码）

.b1{
    background-image:linear-gradient(#fff 0,#fff 30%,red 0,red 60%,#000 0,#000);
}

我们再看一下下面这段css代码的样式。

.b1{
    background-image:linear-gradient(to top right,#fff 0,#fff 30%,red 0,red 60%,#000 0,#000);
}

这个也比较容易理解，根据字面意思：根据颜色值得先后顺序，往右上角进行渐变。

如果是角度值的话，渐变的方向该是怎样的呢？我们看代码

.b1{
    background-image:linear-gradient(0deg,#fff 0,#fff 30%,red 0,red 60%,#000 0,#000);
}

.b1{
    background-image:linear-gradient(30deg,#fff 0,#fff 30%,red 0,red 60%,#000 0,#000);
}

由此我们发现：
当渐变是角度值时，偏移的角度如图中所示的那样：

角度为0deg时是由下向上渐变，相当于to top;也就是说如果不设置角度值，其默认值应该为180deg；
如果偏移角度是正的话，实际沿顺时针方向进行偏移，如果偏移角度为负值，则向顺时针的方向偏移负的值。

注意：如果要方便的做出重复渐变背景，未来我们可用 repeating-linear-gradient，要等到css4,不过目前部分浏览器已经开始支持

radial-gradient

径向渐变的语法看起来特别复杂，所以我决定不写了。我尽量通俗的写出来如下：
radial-gradient(circle|ellipse|或者椭圆的X轴直径与Y轴直径的大小，如果写的XY的值相同，则相当于是圆，或者是使用farthest-corner,farthest-side,closest-corner,closest-side；椭圆，或者圆的中心点的位置，可以是xy坐标值，也可以是关键字，top,left…如果只出现一个关键字，这个时候另外一个方向上的值应该是50%，也就是默认的中间；接下来紧跟的是颜色值，以及见色值的边界，边界值只需要写X方向的长度，Y方向的是自动调整的的，也可以使用百分比，百分比参照是根据自己定义的corner或者是side来确定的。。。)

<div class="b2"></div>

css：

.b2{
    background-image:radial-gradient(ellipse farthest-corner at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,#000 10%,#000 90%,red 90%,red);
}

形状如图

---

背景的层级

background-image的层级高于background-color

也就是说，同时设置了background-image与background color时候，background-image是会掩盖background-color。
请看下面代码：

<div class="box b1"></div>

共有的样式box的css代码如下：

.box{
    width:10em;
    height:10em;
    border:1px solid;
    margin:10em auto;
}

此时分别设置.b1的背景：

.b1{
    background:linear-gradient(#fb3 ,#58a) 0 0/50% 50% no-repeat;
    background-color:#ccc;
}

这样代码效果如下：

可以很明显的看到，其中的background-image层遮盖了部分background-color层

background-image是可以有多个值如果background-image有多个值时，这些image会按照先后顺序向CSS中Z轴的反方向层叠，也就是远离你的方向。这种写法必须把多个值写在同一个background或者background-image属性中，不能使用多个background，或者background-image属性来叠加，这样会覆盖掉。

<div class="box b2"></div>
<div class="box b3"></div>
<div class="box b4"></div>

.b2{
    background-image:radial-gradient(ellipse farthest-corner at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 1,#000 10%,#000 90%,red 90%,red );
}
.b3{
    background:linear-gradient(30deg,#fff 0,#fff 30%,red 30%,red 60%,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 1%);
}
.b4{
    background:linear-gradient(30deg,#fff 0,#fff 30%,red 30%,red 60%,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 1%),radial-gradient(ellipse farthest-corner at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,#000 10#000 90%,red 90%,red );
}

效果图如下：

其中最后一张是前两张的叠加效果。
background的语法总是会忘记，所以再回顾下

background: background-image position/size repeat background-origin background-clip background-color,
background-image position/size repeat background-origin background-clip background-color;

其中background-origin与background-clip是挨着的，如果出现一个，则表示两个属性值相同。