您好,登录后才能下订单哦!
这篇文章运用简单易懂的例子给大家介绍怎么使用css3线性渐变语法,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
线性渐变的完整语法:
.demo { background: linear-gradient(to left, black, white); }
效果:
兼容性写法:
要使线性渐变适用于所有支持的浏览器,可以这样做:
.demo { /* IE6 & IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE8+ */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* Safari 4 +,Chrome 2+ */ background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 5.1 - 6.0 */ background: -webkit-linear-gradient(right, black, white); /* Firefox 3.6 - 15 */ background: -moz-linear-gradient(right, black, white); /* Opera 11.1 - 12.0 */ background: -o-linear-gradient(right, black, white); /* 标准的语法 */ background: linear-gradient(to left, black, white); }
效果如上图一样。
渐变角度或起点
线性渐变时通过指定直线渐变线,然后沿该线放置几种颜色来创建的渐变。我们可以通过设置,来为渐变提供方向。
我们可以以有两种方式来设置渐变线的方向:
1、声明渐变所采用的角度,
2、使用关键字,告诉浏览器渐变从哪里开始。
在上述的例子中,我们告诉它从右边开始向左边,这相当于角度“-90deg”。所以这会产生相同的结果:
background: linear-gradient(-90deg, black, white);
效果图:
如果使用“270deg”角度,也会显示相同的结果,相当于“-90deg”。
因此,我们可以使用其中一个位置关键字(顶部,右侧,左侧,底部),或者只是以数字方式给它一个特定的角度,它将找出从哪里开始。
终止颜色和位置
终止位置
使用简单的线性渐变,你只需要两个终止颜色,而无需指定位置(如上述例子所示)。但在下面的示例:
background: linear-gradient(-90deg, black 50%, white 100%);
我们会注意到这已将每种颜色的位置包含在百分比值中。
效果图:
这告诉浏览器每种颜色de渐变要从哪开始从哪结束(规定颜色的长度)。浏览器自然会找出实际的渐变; 你只需告诉它“渐进变化”应该完全“停止”的地方。在上面的示例中,“渐变”会在元素的左边停止,因此你在该元素中看不到太多(如果有)全白。
终止颜色
添加色块不是很复杂了, 只需添加任意数量的逗号分隔值即可。这是彩虹的CSS:
.demo { background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%) ; }
效果图:
关于线性渐变的一些注意事项:
1、CSS3渐变不是属性,二是由浏览器呈现的图像;
2、你可以在CSS中通过url(image.jpg)在任何位置使用渐变;
3、创建渐变的语法实际上就是一个将各种值作为参数的函数;
4、你还可以指定重复的线性渐变,这在某些情况下可以派上很大的用场;
5、颜色终止位置的值可以用百分比表示,也可以用像素表示;
6、对于色标,负百分比值(例如-20%)和百分比高于100%是完全有效的。
关于怎么使用css3线性渐变语法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。