本篇文章给大家带来的内容是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线性渐变语法的详解（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613133.html
微信扫一扫 
支付宝扫一扫 
