首页 行业资讯 宠物日常 宠物养护 宠物健康 宠物故事

css3 渐变怎么实现?

发布网友

我来回答

4个回答

热心网友

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

参考 资料
http://www.w3cplus.com/content/css3-gradient

热心网友

针对不同浏览器有不同的前缀,基本还是相似的,下面的意思是线性渐变,从上方开始,从黑色渐变到白色
-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)

热心网友

楼上有说线性渐变了,还有个径像渐变:-webkit-radial-gradiet(top,#fff,#999);

热心网友

百度gradient

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com