关于css3的背景渐变

php中文网

发布时间：2016-09-28 08:38:26

1229人浏览过

来源于php中文网

原创

关于css3的渐变，目前各大浏览器还未做到很好的支持，所以需要在我们使用时加上各大浏览器前缀。

-moz-：使用Mozilla内核的浏览器（Firefox浏览器）

-webkit-：使用Webkit内核的浏览器（Chrome,Safari浏览器）

-o-：使用Opera内核的浏览器（Opera浏览器）

这里对IE不做过多介绍，对于本文背景颜色的渐变，也没有考虑IE

立即学习“前端免费学习笔记（深入）”；

一。线性渐变(linear-gradient)

1.语法：-moz-linear-gradient(/,,……)

参数：第一个参数便是线性渐变的方向

　　　　top：从上到下；

　　　　left：从左到右；

　　　　right：从右到左；

　　　　bottom：从下到上；

　　　　也可以两两组合，例如从左上：left top,从右上：right top等等，这里就不过多介绍了；

　　　　angle代表角度（一直认为涉及到角度一个平面直角坐标系足够直观）。

　　第二个参数和第三个参数分别是起点和终点的颜色，还可以再他们之间插入更多的参数，表示多种颜色的渐变，颜色支持使用16进制数值表示，也可以使用rgb(a)数值

　　例：background:-moz-linear-gradient(top,#000,#fff);

　　　　注：表示从#000到#fff的渐变

　　　　background:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

　　　　注：表示0-50%是#000,50%-100%是#555

2.语法：-webkit-linear-gradient(/,,……) 【新式语法书写规则】

　　　　-webkit-gradient(,/,/,,……) 【老式语法书写规则】

　　　　新式语法书写规则与其他相同这里不过多介绍，下面介绍一下老式语法规则：

参数：第一个参数表示渐变类型，可以是linear(线性)或者radial(径向)；

　　第二个参数和第三个参数表示渐变的起点和终点，可以是坐标或关键值；

　　第四个和第五个参数分别表示起点和终点的颜色，还可以再他们之间插入更多的参数，表示多种颜色的渐变，颜色支持使用16进制数值表示，也可以使用rgb(a)数值。

　　例：background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#000));

　　注：表示从上到下，从#fff到#000的渐变

好看的渐变背景动画特效

下载

　　background:-webkit-gradient(linear,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)));

　　注：表示从左上到右下0-50%是白色，50%-100%是透明度为0.2的黑色

3.语法：-o-linear-gradient(/,,……)

　　例：background:-moz-linear-gradient(top,#000,#fff);

　　　　注：表示从#000到#fff的渐变

二。径向渐变（radial-gradient）

语法：-moz-radial-gradient(/,/,,……);

　　-webkit-radial-gradient(/,/,,……);

oprea浏览器对径向渐变的支持还不太好，所以在这里不介绍。除了在线性渐变中看到的其实位置，方向和颜色，径向渐变允许指定渐变的形状：圆形（circle）和椭圆形（ellipse）和大小:最近端（closest-side），最近角（closest-corner），最远端（farthest-side），最远角（farthest-corner），包含（contain），覆盖（cover）。对于这几个大小的设置有的差距甚微，有些迷惑。

例：background:radial-gradient(#fff, #000);

　　background: -webkit-radial-gradient(#fff, #000);

　　注：表示从白到黑的圆形渐变

　　background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #000);

　　background: -webkit-radial-gradient(80% 20%, closest-corner, #fff, #000);

　　注：表示在80% 20%的位置有白色圆到黑色的渐变

2.css的重复渐变

语法：-moz-repeating-linear-gradient(/,,……);

　　-webkit-repeating-linear-gradient(/,,……);

　　-o-repeating-linear-gradient(/,,……);

　　-moz-radial-gradient(/,/,,……);

　　-webkit-radial-gradient(/,/,,……);