CSS3渐变属性之graident

发表于

随着前端技术的日益更新，css3中涌现除了许多有意思且能为我们粉饰网页所用的新特性，gradient就是其中一个出色的渐变特性，它能够让我们来背景中应用几种合适的颜色进行渐变，让网页看起来更加酷炫，本文主要针对于基于下面几款内核的现代浏览器，如Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)，暂不考虑在Trident(IE)的兼容。

线性渐变

线性渐变在Molliza下的应用

语法：

1
-moz-linear-gradient([angle | to side-or-corner]? , color-stop-list)

参数：

参数分为两部分，第一部分表示渐变的方向（渐变方式为线性或者径向，由前缀指定），如top代表从上至下渐变，left为从左至右渐变，left top是从左上角向右下角渐变。第二个参数长度是可变的，至少需要一个起始颜色和终点颜色，中间可以插入更多的参数。

ps:不加私有前缀的时候需要再angle前面加to

angle:用角度指代渐变的方向。

  • to left:设置渐变从右到左，相当于270deg
  • to right:设置渐变从左到右，相当于90deg
  • to top:设置渐变从下到上，相当于0deg
  • to bottom:设置渐变从上到下，相当于180deg

EXP:

1
2
3
4
.gradient{
	background:-moz-linear-gradient(top,#d8d8d8,#353535);
}

moz

线性渐变在webkit下的应用

1
2
3
4
/*最新语法*/
-webkit-linear-gradient( [point || angle,]? stop, stop [, stop]* )
/*老式语法*/
-webkit-gradient(type, point [, radius>]?, point [, radius]? [, stop]*)

这里我们附上两个例子，新式写法与mozilla一致，老式写法则有点偏差

EXP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*老式写法*/
.gradient{
    background: -webkit-gradient(linear,center top,center bottom,from(#fff), to(#000));
}
/*新式写法*/
.gradient{
    background:-webkit-linear-gradient(left top,#fff,#000);
}
```	
### 线性渐变在opera下的应用
与前面的语法一样，区别只在于私有前缀的改变--**“-o-”**
直接附例子：
**EXP:**
``` css
.gradient{
	background:-o-linear-gradient(top,#d8d8d8,#353535);
}

start point补充

Start Point的工作方式与backgrond的position属性类似。我们可以设置水平或者垂直位置为百分比、像素、或者在水平方向上使用left、center、right，垂直方向上使用top、center、bottom。如果不指定位置，则默认是center。

径向渐变

css的径向渐变在语法方面课线性渐变是很相像的，只是径向渐变目前还不支持Opera浏览器，这点请注意，所以只能应用-moz-,-webkit-

1
2
-moz-radial-gradient([bg-position || angle,]? [shape || size,]? color-stop, color-stop[, color-stop]*);
 -webkit-radial-gradient([bg-position || angle,]? [shape || size,]? color-stop, color-stop[, color-stop]*);

除了线性渐变支持的参数之外，径向渐变还支持渐变形状（圆形（circle）或者椭圆（ellipse））和大小参数（最近端，最近角，最远端，最远角（closest-side，closet-corner，farthest-side，farthest-corner），包含或者覆盖（contain or cover））

EXP1:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(#ff00ff,#ffccff ,#99ffcc);
    background: -webkit-radial-gradient(#ff00ff,#ffccff ,#99ffcc);
}

效果

radial1

EXP2:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(#ff00ff 5%,#ffccff 20%,#99ffcc 50%);
	background: -webkit-radial-gradient(#ff00ff 5%,#ffccff 20%,#99ffcc 50%);
}

效果

radial2

例一与例二区别：起止颜色都相同，但是例一使用默认的均匀变化的径向渐变，例二给颜色设置了固定的位置。

EXP3:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(top left,circle,#ff00ff ,#ffccff ,#99ffcc );
	background: -webkit-radial-gradient(top left,circle,#ff00ff, #ffccff ,#99ffcc );
}

效果

radial03

EXP4:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(top left,ellipse,#ff00ff ,#ffccff ,#99ffcc );
	background: -webkit-radial-gradient(top left,ellipse,#ff00ff, #ffccff ,#99ffcc );
}

效果

radial4

例三和例四的区别：默认径向渐变中形状为ellipse，但当div大小为正方形时会失效，例三中我们改变默认，置为circle圆形渐变。

EXP5:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(ellipse closest-side,#ff00ff ,#ffccff ,#99ffcc );
	background: -webkit-radial-gradient(ellipse closest-side,#ff00ff, #ffccff ,#99ffcc );
}

效果

radial5

EXP6:

1
2
3
4
.gradient{
    background: -moz-radial-gradient(ellipse farthest-corner,#ff00ff ,#ffccff ,#99ffcc );
	background: -webkit-radial-gradient(ellipse farthest-corner,#ff00ff, #ffccff ,#99ffcc );
}

效果

radial6

例五和例六的区别：这两个例子我们使用第二个参数中的size，例五的closest-side决定了由起始点到最近边的渐变范围，例六的farthest-corner则是起始点到远角的渐变。

重复渐变

css的两种渐变到这里也介绍结束了，下面补充一点内容，即重复渐变的应用。

重复渐变需要使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient，我们可以指定起止颜色，让他们无限重复，并构建出奇怪又有趣的图案。

EXP7:

1
2
3
4
5
.gradient{
    background: -moz-repeating-radial-gradient(#ff9933,#00ffff 5px, #f96 15px);
	background: -webkit-repeating-radial-gradient(#ff9933, #00ffff 5px, #f96 15px);
}

效果

radial8

渐变的组合

其实，通过不同的组合，我们可以设计出形形色色的背景墙哦，请看下图：

radial7

怎么样，是不是特别漂亮，完全不需要用图片来替代，只要简单的几行代码我们就可以拥有自己想要的各种图案。网址链接在这里哦！！！

本片博客到这里就结束了，如果想了解更多或者想知道IE下的实现，大家可以自行百度或者google哦！