[持续更新]CSS3学习笔记（二）渐变&圆角&阴影&变换&动画
1. 颜色模式
在网页中常见的颜色模式有：RGB，HSLA。
RGB 大家不陌生，分别代表red，green，blue。使用6位16进制数表示。#00FF00；
RGBA 就说多了一个Aplha透明通道。这个数值用0~1的数字来表示。rbga（255，255，255，0.3）；
HSLA 分别代表色调Hue，饱和度Saturation，亮度Light，透明度Alpha。
但是在实际应用中，通常是HSLA调整颜色，之后转换成rbg的颜色模式表示。
在兼容方面：IE8及以下版本不支持HSLA颜色表示法。
IE6及之前的版本不支持RGBA的，可以使用IE特有的滤镜来添加效果。
如果是图片，指定透明度使用opacity属性，该属性值也是0~1的数。
.image{
filter:Alpha(Opacity);/IE兼容代码/
opacity:0.2
} 2. 渐变
CSS3中新增的渐变可以说是使用CSS来代替图片完成美化效果，减少图片使用。
渐变分为线性渐变（linear-gradient），和发射渐变（radial-grandient）。
线性渐变语法：
background：linear-gradient(方向，开始颜色，结束颜色);
方向默认是从上到下渐变，可以指定left/to right, 还可以指定角度0deg, 或者左下角bottom left等，颜色可以指定多个，还可以对每部分颜色指定宽度等;
background：linear-gradient(red,blue);
background：linear-gradient(left,red,blue);
background：linear-gradient(45deg,red,blue);
background：linear-gradient(red,blue);
background：linear-gradient(45deg,red,blue);
background：linear-gradient(bottom left, red,blue);
background：linear-gradient(left, red 15%,orange 15%,blue 70%); 另外，该属性需要写明浏览器特有的标识，下面给出一个彩虹色的css渐变。
. linear-gradient {
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
} 放射渐变跟线性渐变差不多，第一个参数为中心店位置，默认为中心。
#radial-gradient {
width: 300px;
height: 300px;
float: left;
border-radius:50%;
background:-webkit-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-o-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
} 在实际的工作中，渐变变得很有用。比如Bootstrap的按钮背景色就是渐变色，这样使得按钮有一种立体感，使人更容易点击。
3. 圆角和阴影
圆角属性：border-radius，该属性的值可以是像素，也可以是百分比。注意的是，当元素长宽比为1:1时，圆角值为50%即为原型，并且圆角值不会比50%更大。圆角的值不能超过长宽比的一半。
.radius {
border-radius:20px;/4个角都是相同的值/
-moz- border-radius:20px;/支持老版本FF/
-webkit- border-radius:20px;/支持老版本webkit内核/
}也可指定4个角不同的圆角值。
.radius {
border-top-left-radius:20px;/左上/
border-top-right-radius:20px;/右上/
border-bottom-left-radius:20px;/左下/
border-bottom-right-radius:20px;/右下/
} 边框阴影跟之前讲的文字阴影很像。IE6~8不支持。
语法：box-shadow:{color 水平偏移垂直偏移 模糊距离 阴影尺寸 inset};
属性ps的同学可能会对这几个值比较熟悉，因为这些值也是ps中设置阴影的必须值。简单来说：
inset 内部阴影，可选为outset 外部阴影。决定阴影是对外还是对内。
水平偏移：阴影向右便宜的距离，负值表示向左。
阴影尺寸：就是阴影向外延伸出去的长度。
模糊距离：相当于是对阴影尺寸做了渐变，渐变长度就是设定的值。
另外，和边框不同的是，阴影是不占空间的。
3．变换和动画
CSS3中大家了解最多的要数其新增的变换和动画效果，新的属性可是实现以前只有javascript才能实现的效果，简化了网页编写的工作，提升了开发效率，当然也是十分的酷炫，而且节省流量。
1. 变换（transform）
transform属性有很多值：旋转（rotate），扭曲（skew），位移（translate），缩放（scale）。
1.1 rotate旋转变换
简单的2D旋转：会将元素按照中轴线顺时针旋转指定的角度。
.rotate {
transform:rotate(20deg);
-ms-transform:rotate(20deg);/* IE9 */
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
} 还可使用rotateX沿X轴向上旋转，rotateY沿Y轴向上旋转
.rotateX {
transform:rotateX(20deg);
-ms-transform:rotateX(20deg);/* IE9 */
-moz-transform:rotateX(20deg);
-webkit-transform:rotateX(20deg);
-o-transform:rotateX(20deg);
} 这里要注意的是，我们直观地感受就是在使用rotateX时，元素在纵向被压缩了，其实是元素的上半部分向内凹陷，下半部分向外突出形成的一种旋转效果。
复杂的3D效果：元素会沿着xyz轴构建向量，最后偏转一定角度。
rotate3d {
transform:rotate3d(1,0,0,10deg);
-ms-transform:rotate3d(0,1,0,10deg);
-moz-transform:rotate3d(0,0,1,10deg);
-webkit-transform:rotate3d(1,1,1,10deg);
-o-transform:rotate3d(0,0,0,10deg);
} 这里需要理解下：rotate3d共接受四个值，前三个值分别代表xyz是否旋转，1代表旋转，0代表不旋转；最后一个是旋转的角度。例子中的transform:rotate3d(1,0,0,10deg);其实就等价于transform:rotateX(10deg);当xyz轴都旋转时，相当于整个模型旋转。
这个还是比较抽象，需要具有一定的空间想象力。
不懂的可以看看这个：
http://jingyan.baidu.com/article/d621e8da0aa7192865913f05.html
1.2 skew扭曲变换
用过ps的同学会对这些熟悉些：
.skew {
transform:skew(30deg,10deg);
}该属性接受两个参数：第一个参数是元素的中轴线沿着当前的中轴线逆时针旋转的角度，元素的水平线不变，第二个参数正好相反。
也可使用skewX,和skewY单一方向变换。
该属性不支持3D效果。
1.3 scale比例缩放
按照比例缩放：
.scale {
transform:scale(1.1,0.8);
}该段代码表示元素按照原尺寸分别在横向和纵向上放大到1.1，0.8倍。
也可使用scaleX，scaleY，scaleZ在单个方向上缩放，不过会造成拉伸，图像失真。
1.4 translate位移变换
translate就是平面上的xy轴位移
.translate {
transform:translate(100px,200px);
} 也可使用translateX，translateY，translateZ，当方向位移。
2. 渐变（transition）
.transition {
height: 200px;
transition:height 1.0s;
}
.transition:hover {
height: 500px;
}这个属性有点类似jquery的animaite属性，是一种简单的动画。
元素的高度200，当鼠标在其上悬停时高度变为500，这是一个瞬间的效果，用了该属性会是这个过程在1.0s内完成，这样我们看到的就是一个动画。
如果要同时改变多个属性，使用逗号隔开。
transition: width 1.0s, height 1.0s;transition还可选择多种动画函数：
ease 逐渐变慢 默认；
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out减速然后减速
cubic-bezier 自定义一个时间曲线
transition:all 0.5s ease-in-out 1s;/*1s表示动画的延迟时间*/ 3. 关键帧（@keyframes）
使用关键帧来完成动画效果。
animation