css3 渐变怎么实现？

Question

css3 渐变怎么实现？

Answer 1

1 2	// html部分 <div class="box"></div>

 

1 2 3 4 5 6 7 8 9

// css部分 .box{     width: 500px;      height: 50px;     background: -webkit-linear-gradient(to right,#17c864,#3fccf0);     background: -moz-linear-gradient(to right,#17c864,#3fccf0);     background: -o-linear-gradient(to right,#17c864,#3fccf0);     background: linear-gradient(to right,#17c864,#3fccf0); }

 

Answer 2

针对不同浏览器有不同的前缀，基本还是相似的，下面的意思是线性渐变，从上方开始，从黑色渐变到白色
-webkit-linear-gradient(top,#000,#fff);
-moz-linear-gradient(top,#000,#fff);
-o-linear-gradient(top,,#000,#fff);
也可以加一些渐变中间的颜色
-webkit-linear-gradient(top,#000,#eee 20%,#fff);
也可以使用color stop,跟上面的意思相同
-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)

Answer 3

属性 Gradient( <渐变类型>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

-webkit-
-moz-l
-o-
前缀是 各种浏览器的 特有样式

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