一、transition
transition是复合属性，可以改变元素数值类的属性，例如宽高、背景颜色等。
一个元素从一个样式过渡到另外一个样式需要的时间，transition可以设置过渡的时间速度等。
如下代码，当鼠标移入div1元素时，会从#div1的样式变到#div1:hover的样式。
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
/*transition-duration:1s;过程时间
transition-property:left;
transition-timing-function:ease-in-out;改变速度
transition-delay:1s;延时1s*/
transition:1s width,2s 0.5s left,3s 2.5s background;
left:10px;
top:10px;
}
#div1:hover{
width:200px;
height:200px;
left:100px;
background:blue;
}
</style>transition-duration:1s;设置样式变化经历的时间（1秒）；
transition-property:left;只改变某个属性的值（left）；
transition-timing-function:ease-in-out;改变变化速度；
transition-delay:1s;变化延时时间（1秒）。
还可以把这些属性写在一起： transition:1s width,2s 0.5s left,3s 2.5s background;
宽度变化经历1s;left 0.5s后开始变化，经历2s;背景2.5s后开始变化，经历3s。
补充：transform:rotate(720deg);旋转720度
二、border-radius圆角弧度
border-radius的写法：1-4个数字/1-4个数字 ；
1、“/”左右两边都可以写1-4个数字，并且左右两边的数字个数可以不同。
2、左边代表水平方向，右边代表垂直方向，没有“/”则水平垂直的弧度都一样，某个角的实际效果由左右两边共同决定。
3、某一边写1-4数字的效果为（左右两边同理）：
4个值：没个值按顺讯分别控制左上，右上，右下，左下（顺时针方向）四个方向。
3个值：第一个值控制左上，第二个值控制右上和左下，第三个值控制右下 ；
2个值： 对角弧度一样，第一个值控制左上和右下，第二个值控制右上和左下。
1个值：4个角的弧度一样。
总结：4个值时，从左上开始顺时针每个值控制一个方向，每少一个值，原来对应位置的值就和对角线一样，一个值时当然全部一样。
4、弧度的值可以是像素px，也可以是百分百（表示原来宽或高的百分之几）。
三、box-shadow和text-shadow阴影效果
1、box-shadow和text-shadow可以设置多组值，每组可以代表不同方向的阴影，每组可以有2-5个值。
2、每组的5个值分别表示：水平偏移、垂直偏移、模糊半径、阴影的尺寸、阴影的颜色。
3、其中水平偏移和垂直偏移不可少，如果没有偏移也要设置为0；如果带像素单位的值少于2个则没有效果。
4、最后一个值代表颜色，用单位和其他值区分，颜色写到前面也没有效果，当颜色没有指定时，默认阴影为黑色
5、前面4个单位为px的值，每少些一个，后面的值就为0；写三个时代表水平偏移、垂直偏移、模糊半径；写两个时代表水平偏移、垂直偏移；
6、偏移值以右下为证，当水平偏移、垂直偏移为负数时，分别代表向左和向上偏移。
四、选择器
以下是未加入选择器时的代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 p,#div1 div{
height:30px;
border:1px solid red
}
</style>
</head>
<body>
<div id="div1">
<p>123</p>
<p>123</p>
<div>456</div>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>结果图如下： 
下面的代码都是加入到style中的，改变style后会给出相应的效果图；
1、nth-child() 用于父级下选择某一个元素。
a、括号内可以是自然数；表示查找第几个子元素，并改变该元素的样式，如果该元素不是声明的元素则不改变；
#div1 p:nth-child(3){
background:blue;
height: 50px;
}
#div1 p:nth-child(5){
background:blue;
height: 50px;
}
这里#div1 p:nth-child(3)先选中第三个元素<div>456</div>，但是由于不是声明的p元素，所以无效，不改变样式；而第五个元素符合条件，改变了样式。
b、nth-child()括号内的参数可以带变量n，n从0开始自动往上增加；
#div1 p:nth-child(2n+1){
background:blue;
height: 50px;
}
2n+1选中的有第1、3、5、7；由于第个不是声明的元素所以无效；
2、nth-of-type（）在父级下指定类型查找元素
nth-of-type在查找的时候就已经指定类型了，对nth-of-type来说不是指定类型的元素的不编号查找,就当它们不存在；括号里参数的值和nth-child一样。
#div1 p:nth-of-type(3){
background:red;
}
#div1 p:nth-of-type(3n){
background:red;
}
nth-of-type(3)查找父级下的第三个p元素，实际上父级下的第三个元素是<div>456</div>，但不是P元素，所以不给它编号，直接跳过忽略，父级的第四个元素才是要找的第三个p元素，所以改变了样式。
nth-child是不管什么元素全部编号查出符合参数值的元素，再看看是否为声明元素，是则该编样式，不是则不改变。
nth-of-type是先筛选出声明的元素，再编号，再查出符合参数值的元素，然后改变样式。
五、渐变
以下是未加入渐变效果的代码；下面加入渐变效果的代码都是加在#div1的样式中的，加入后会给出效果图；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:100px;
height:100px;
margin: 50px auto;
border:1px solid red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>效果图就是一个框，什么都没有：
radial-gradient()径向渐变：以弧度的形式扩散；
1、第一个参数可以写方向（也可以不写方向，线性渐变方向默认top从上到下，径向渐变默认在中心），径向渐变可以以像素为单位设置坐标的偏移量，后面的参数全部都是设置颜色的，每个参数之间用“,”隔开，颜色参数可以无数个。
2、当第一个参数写了方向时，要声明浏览器内核，否则会有兼容问题；
以下是主要浏览器的内核：
谷歌 -webkit-
火狐 -moz-
opera -o-
ie -ms-
例如要兼容谷歌浏览器要把linear-gradient改成-webkit-linear-gradient；
好了，写第一个样式来看看效果：background:radial-gradient(red,blue ,green)
默认渐变中心就是在元素的中心，每个颜色的空间默认平均分配。
第二个例子：background:-webkit-radial-gradient(30px 30px, red,blue ,green)
可以看到中心偏移了
第三个例子： background:-webkit-radial-gradient(bottom,red,blue ,green)
中心在底部。
linear-gradient()线性渐变
线行渐变方向默认top从上到下，方向参数可以用度数deg来确定。
第四个例子：background:linear-gradient(red ,blue ,green);
第五个例子：background:-webkit-linear-gradient(30deg,red ,blue ,blue ,green);
第六个例子：background:-webkit-linear-gradient(90deg,red ,blue ,green);
倾斜90度就和background:-webkit-linear-gradient(bottom,red ,blue ,green);是一样的
3、颜色参数可以分为两个部分，第一部分为颜色，第二部分为颜色从哪里开始渐变，是个百分比值，表示占元素宽高的百分之几；
第七个例子：background:-webkit-linear-gradient(left,red 10%,blue 50%,green 50%);
前10%都是红色的，从10%-50%开始向蓝色渐变，50%-50%从蓝色到绿色渐变，由于50%=50%，所以这里蓝色到绿色没有渐变空间，直接变色。
六、css 2D
1、transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
在操作元素的样式里加上transition:1s;然后#元素id:hover{transform: 方法();}就可以实现单鼠标移入该元素时产生动画的效果了。下面说说transform的方法。
rotate（n deg）旋转n度。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
scale(angle) 整体扩大 取值 正数 小数 负数 比原来的大小扩大几倍 为负数时先缩小到没有在扩大到负数的绝对值倍
scaleX(angle) 左右方向扩大
scaleY(angle) 垂直方向扩大
translate 改变位置 默认向右
translateX 横向位置 左负 右正
translateY 纵向位置 上负 下正
七、css 3D
要实现3D效果必须在相应元素创建3D环境和设置景深（3D效果是在多远的距离看到的）；
/*创建3D 环境*/
transform-style: preserve-3d;
perspective:1500px;/*景深*/下面介绍一些属性和方法的功能：
rotate旋转；
transform-origin 设置旋转基点；
补充：CSS3的特性还有很多，不可能全部在这里列出来，我只是把目前学到的内容尽量的写了进来，以后继续学到其他特性也会写到这里进来。想学习其他特性的同学可以去这里看看，深入了解 CSS3 新特性；写得真心不错。
