CSS3引入了背景渐变、background-origin、background-clip、background-size、遮罩等多个属性。这里将记录我从网上和书上学习的笔记和心得体会。
首先是渐变，我这里讲述的渐变不仅仅是背景色的渐变还将包括透明度渐变。以前做这种背景色渐变的button是要使用图片的（或是其他方法），由于在下小白不会ps所以往往都用现成的图片。如今css3就能轻松实现这样的效果。渐变分为很多种，这里我记录两种。
1、线性渐变
线性渐变代表背景色的变化按照x轴或y轴平滑变化。
语法: background: -webkit-linear-gradient( [point || angle ] , stop ,stop +）
第一个参数可以是用于设置起始点(起始边)eg:top left 或者 top也可以是渐变的旋转角度按照逆时针方式计算，设置为0时效果等同于设置left，表示从左边开始渐变。
stop代表颜色节点，可以有多个。eg: -webkit-linear-gradient(left ,yellow,black，blue)代表颜色从左侧开始渐变颜色依次变化，从黄变黑再变蓝。
同时stop还可以包含位置属性，这可以用像素或者百分比值表示。是不是看着觉得不知所云。举个例子吧：
background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96); 这就是使用了stop所包含的位置属性，0%代表起始位置100%代表终点。采用了位置属性渐变的效果将是不均匀的。效果如下
source:http://qianduan-notes.diandian.com/CSS3_Gradient
而没有指定位置颜色将会均匀分布:background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
source:ttp://qianduan-notes.diandian.com/CSS3_Gradient
下面这是刚刚开始的那张购买的button的代码:
2 <html>
3 <head>
4 <meta charset="gbk">
5 <style>
6 .test{
7 background: -webkit-linear-gradient(
8 top,
9 #F1D49C,
10 #CAA578
11 );
12 width:100px;
13 height:40px;
14 border-radius:5px;
15 color:white;
16 border:none;
17
18 }
19 .test:hover{
20 background: -webkit-linear-gradient(
21 top,
22 #CAA578,
23 #F1D49C
24 );
25 }
26 </style>
27 </head>
28 <body>
29 <input type="submit" value="购买" class="test">
30 </body>
31 </html>