css3 渐变怎么实现？

Question

css3 渐变怎么实现？

Answer 1

12//&nbsp;html部分<div&nbsp;class="box"></div>&nbsp;123456789//&nbsp;css部分.box{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-webkit-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-moz-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;-o-linear-gradient(to&nbsp;right,#17c864,#3fccf0);&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;linear-gradient(to&nbsp;right,#17c864,#3fccf0);}&nbsp;

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为结束点；第二个表示该点的颜色。