CSS 渐变：
是在 CSS3 Image Module 中新增加的 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。
CSS3渐变共有3种：
（1）线性渐变（linear-gradient）；
（2）径向渐变（radial-gradient）；
（3）重复渐变（repeating-linear-gradient）；
线性渐变，指的就是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。
语法：background:linear-gradient(方向，开始颜色，结束颜色);
background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); —16进制色
径向渐变：
CSS3径向渐变，是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）。CSS3径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变
语法：background:radial-gradient(position ,shape size,start-color,stop-color)
重复渐变
重复渐渐repeating参数与线性渐变linear-gradient和径向渐变linear-gradient相同,重复渐变是在线性渐变和径向渐变基础上的延伸
repeating-linear-gradient 重复线性渐变
repeating-radial-gradient 重复经向渐变
background-image: repeating-linear-gradient(to bottom,orange 0,green 20px); 
参考地址
http://www.runoob.com/css3/css3-gradients.html
http://caibaojian.com/css3/values/image/linear-gradient().htm
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/205427.html原文链接：https://javaforall.net
