开发者学堂课程【零基础学前端 HTML+CSS：渐变 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5149
渐变
内容介绍
一、渐变的介绍
二、渐变操作示例
一、渐变的介绍
渐变在早期的样式表里是无法实现的，渐变可以让背景从一种颜色渐变到另外一种颜色。渐变还包含线性的渐变和扩散性的渐变，它们之间的形式不同。早期都是使用图片来代替渐变的效果，将图像插入背景里，容易耗损文件量，因为差一张图，文件量就差很多，写一行代码，几乎文件量就没有的。
1.渐变可以创建类似于彩虹的效果，低版本的浏览器不得不使开发者用图片来实现，CSS3 可以轻松实现网页渐变效果。
2.background:-webkit-linear-gradient(#ffffff,#000000);
后面就是渐变的一个方向。
二、渐变操作示例
1、宽高都设置 500 像素，从白色渐变到黑色。
#linear {
width:
500px ;
height: 500px;
background: linear- gradient (#ffffff, #000000) ;
}
2、也可以去修改颜色，从绿到黑。
3、从绿到白，电脑可以进行演算。
4、所以现在很多页面上的按钮都是用渐变的图像做的，按钮设置宽高 200*60，颜色可以自己去调，可以再增加一种颜色都可以。
#linear{
width: 200px;
height:60px ;
background: linear- gradient (#00ff00, #000000, #ffffff) ;
5、或者从白渐变到灰。
#linear {
width: 200px ;
height: 60px;
background: linear- gradient (#000000, #cccccc);
}
6、上面就可以打上文字。再处理文字跟图层的位置。
<div id=" linear" > 点击我</div>
7、可以使用代码的形式来写背景颜色的渐变，可以多个颜色之间变化，都是用电脑进行处理，这就是渐变。
