一、transition

transition是复合属性，可以改变元素数值类的属性，例如宽高、背景颜色等。

一个元素从一个样式过渡到另外一个样式需要的时间，transition可以设置过渡的时间速度等。 如下代码，当鼠标移入div1元素时，会从#div1的样式变到#div1:hover的样式。

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、偏移值以右下为证，当水平偏移、垂直偏移为负数时，分别代表向左和向上偏移。

四、选择器

以下是未加入选择器时的代码；

            
                                    
    
            
     
123
            
     
123
            
     
      456
     
            
     
123
            
     
123
            
     
123
            
     
123
              
    
    

结果图如下：

下面的代码都是加入到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的样式中的，加入后会给出效果图；

效果图就是一个框，什么都没有：

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的特性还有很多，不可能全部在这里列出来，我只是把目前学到的内容尽量的写了进来，以后继续学到其他特性也会写到这里进来。想学习其他特性的同学可以去这里看看，；写得真心不错。