前言
本篇博客看起来可能会比较枯燥，但是是我纯手打的，转载请注明啊。。。因为全是知识点的总结，也可以当做使用时查询的文档。
css3选择器
（图片来自w3school）
其中，有几个选择方式，我看了好几遍都没有明白到底啥意思，后来找到一个比较通俗的解释，加上自己的实验，得出以下解释：
:first-of-type p:first-of-type 选择每个p元素是其父元素的第一个（比如一个div中有三个p元素，这个选择方式会选中第一个p）
:last-of-type p:lat-of-type 选择每个p元素是其父元素的最后一个（比如一个div中有三个p元素，这个选择方式会选中最后一个p）
:only-of-type p:only-of-type 选择每个p元素是其父元素的唯一元素（比如一个div中有三个p元素，另一个div中有一个p元素，这个选择方式会选中那个只有一个p元素的div元素中的p）
css3文本
@font-face特性
在css3出现之前，必须使用用户计算机上已安装的字体，有了css3，可以使用想使用的字体。
两种情况：
1、客户端已经安装了字体。
<p><font face="arial">我是已经安装在客户端的字体显示的</font></p>
<p><font style="font-family: arial">我是已经安装在客户端的字体显示的</font></p>
以上两种写法表达的意义相同。
2、不确定客户端有没有安装某些特殊字体，通过从服务端下载字体来达到显示的效果。
@font-face {
font-family: definefont;
src:url(BORDERW0.eot);
}
可以看到，在里面声明了字体的名称，和安装的路径。
再来使用就行了：
p{font-family:definefont;}
css3文本效果
word-wrap
设值为break-word：根据元素的宽度对文本进行强制换行。
设值为nomal：只在允许换行的地方进行换行处理，不处理则会溢出元素。
text-overflow
设值为clip：对超出宽度的文字不进行处理，只是简单的裁剪。
设值为ellipsis：对超出宽度的文字显示省略号。
（这个效果的使用，一般会结合overflow和white-space来使用）
其他文本效果：
（图片转自w3school）
css3文字渲染
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
css3文字阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
属性值依次是：
水平阴影、垂直阴影、模糊距离、阴影的颜色
css3边框
边框圆角：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
border-radius：左上角 右上角 右下角 左下角；
两个值：左上角与右下角 右上角与左下角
三个值：左上角 右上角与左下角 右下角
一个值：四个角
边框阴影：
border-shadow：水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
边框图片：
border-image: source slice width outset repeat|initial|inherit;
（图片转自w3school）
css3颜色
颜色透明度：
rgba（200,200,200,0.7）;
这里的a就代表不透明度，值越小，越透明
hsla（110,50%，50%，0.5）；
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。
css3背景
background-size
用于调整背景图片的大小
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 .
background-clip
通常情况背景图片都是覆盖整个元素，调整此属性可以调整背景从哪里开始显示。
background-clip: border-box; 背景从 border 开始显示 ;
background-clip: padding-box; 背景从 padding 开始显示 ;
background-clip: content-box; 背景显 content 区域开始显示 ;
background-clip: no-clip; 默认属性，等同于 border-box;
background-origin
用于确定背景的位置，通常与background-position联合使用
background-origin: border-box; 从 border. 开始计算 background-position;
background-origin: padding-box; 从 padding. 开始计算 background-position;
background-origin: content-box; 从 content. 开始计算 background-position;
background-break
在css3中允许一个元素在不同盒子中显示，这个属性就是控制背景在这些盒子中如何显示
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。
多重背景
background:url('1.jpg),url('2.jpg') ；
背景图重叠放置，也可以给他们单独设置其他属性
css3反射效果
box-reflect：direction offset mask-box-image
这三个值分别是：
1、方向，规定反射在哪个方向，取值为above，below，left，right
2、偏移量，表示倒影与对象之间的距离，取值可以为正数、负数、百分数（百分比是根据图像大小确定）
3、遮罩图像，该图像会覆盖投影区域，如果没有这个参数，默认为0。他的取值为：
none：无遮罩图像。
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。
css3渐变
线性渐变
基本语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
参数是方向与颜色值，其中，方向与颜色有多种设置方式，这个我觉得先从方向开始区分比较好
1、默认方向：从上至下（因此只需写起止的颜色即可）
2、to direction（to后面接的就是终点方向，那么起点方向就与他相反），比如：
banckground:linear-gradien(to right red blue);
即是从左至右
3、direction direction(两个方向值一般就是斜对角)比如：
banckground:linear-gradien(top right red blue);
即是从右上角到左下角的线性渐变
4、多颜色渐变
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
5、重复的渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变
基本语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
也可以这样
漫射光效果
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
效果是这样，像一盏灯照射下来
尺寸大小
closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);
颜色结点
background:radial-gradient(circle,red 50% ,blue 70%);
注意：此时的百分比,指的是圆心到元素最远端的距离（角度）
重复渐变
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);
css3的转换
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
Internet Explorer 9 要求前缀 -ms- 版本.
2D转换
用于元素的位移，伸缩，旋转，倾斜
（转自csdn的博客）
位移
transform：translate（x，y），x为x轴（左边）移动距离，y轴（顶边）移动距离
还可以有translateX（n），translateY（n）（只移动x轴位置或y轴位置）
旋转
transform：rotate（ndeg），n为角度，正数为顺时针，负数为逆时针，旋转中心为图形的中心点
伸缩
transform：scale（x，y），x为宽度伸缩的倍数，y为高度伸缩的倍数，如果数值为大于1，就是拉伸，如果数值小于1，就是缩小。也可以是一个数字，这样的情况，一个数字代表宽和高。
同样可以有scaleX(n),scaleY(n)
倾斜
transform：skew（xdeg，ydeg）x为x轴倾斜的角度，y为y轴倾斜的角度，以左下角为倾斜中心。
同样可以有skewX(ndeg),skewY(ndeg)
矩阵
transform：matrix（n,n,n,n,n,n）
这个好难，在这里三言两语说不清，具体可以参考其他网友的文章链接点我
位置transform-origin
语法：transform-origin: x-axis y-axis；更改元素的位置。
但是使用此属性之前必须使用transform。
3D转换
方法与2D转换差不多，但是2d与3d的转换方式完全不同，具体的不同，敲代码来看吧。
3D转换也有位移，缩放，旋转，矩阵，只是多了一个z轴，方法就不一一举例了。
来看看3d转换与2d转换不同的部分。
（转自csdn博客）
perspective
透视视图：元素距视图的距离
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
这个属性只影响3d元素。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
语法：perspective:n；n为数字，设置子元素距视图的距离。
转换风格transform-style
语法：transform-style: flat|preserve-3d;
但是使用此属性之前必须使用transform。
底部位置perspective-origin
语法：perspective-origin: x-axis y-axis;（默认值为50%，50%）
背面可见backface-visibility
语法：backface-visibility: visible|hidden;
如果在旋转时不希望看到该元素的背面，这个属性就有用。
css3过渡
属性
语法：transition：property duration timing-function delay；
property是需要应用过渡的属性，比如宽度，颜色等，transition-property：none | all | one property ；
duration是过渡持续的时间，以秒或者毫秒记，transition-duration：time
timing-function是过度效果的时间曲线，只能使用一个值，transition-timing-function: linear;值有如下这些
ease:平滑过渡（0--慢--快--慢），默认值
cubic-bezier(0.25,0.1,0.25,1)
linear:线性过渡（匀速） cubic-bezier(0,0,1,1)
ease-in:慢--快 cubic-bezier(0.42,0,1,1)
ease-out:快--慢 cubic-bezier(0,0,0.58,1)
ease-in-out:慢--快--慢
cubic-bezier(0.42,0,0.58,1) （贝塞尔曲线）
delay是过渡延迟执行的时间，以毫秒或秒来记，比如值为1s，那么这个过度效果就延迟一秒才开始执行。
transition-delay: 2s;
两种写法
1、列举：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
2、缩写
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
css3动画
css3动画的出现，让css脱离了“静止”的概念，出现一些可以替代图片与flash的动画。
先来看看怎么使用：
先创建一个动画：
@keyframes关键帧：
两个属性，一个是关键帧，一个是需要变化的样式
1、关键帧
a，0%与100%，表示开始与结束时间也可以使用from与to来表示
b，使用百分数，10%，20%，50%，100%，并不是每一个时间点都需要进行设置，只需要设置关键帧就行了。
2、变化的样式，比如在动画开始时，颜色变为红色，结束时颜色变为绿色，即为from{color:red;}to{color:green}
应用动画
一个动画设置之后如果不应用到选择器上，就不会起作用。
animation有以下这些属性
（sorry，我截图写的，字有点小）
下面解释一下那些属性值没有给全的属性
animation-direction：normal , reverse , alternate , alternate-reverse ；
normal : 正常方向
reverse :反向运动
alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
animation-play-state：paused | running ；
paused ： 指定暂停动画
running : 默认值，制定正在运行的动画
复合写法：
animation ： name duration timing-function delay interation-count direction play-state
css3多列
将文本内容设计成报纸那样多列的格式。
比如这样：
那么将一段文字分割成这么多列显示需要设置些什么属性呢？
（图片来自csdn博客）
css3框大小
为什么有些元素明明width和height设置为一样的，但显示出来就是不一样呢？
这就是因为
元素实际宽度=padding+border+width
元素实际高度=padding+border+height
因此，想要获取元素的实际宽高，需要将元素的内边距与边框加上。
方法就是设置box-sizing：border-box；
这个方法将元素的边框及内边距加在一起得到实际显示的宽高。
从结果上看，box-sizing为border-box效果更好，因此建议将元素设置这个属性。
css3弹性盒模型
当页面在不同的屏幕大小，不同设备类型时，确保元素有相应的布局方式。
查了很多资料还是没说清楚，仿佛是太麻烦了。不过我还是要一条条属性的列出来，才能明白。
举例
先说一个传统的三栏布局，要求中间的元素自适应屏幕大小，我们通常的做法就是设置三个元素，左右两边的设置固定宽度并固定定位，中间的元素宽度设置为100%；
如下所示：
使用弹性盒模型，只需要设置三个元素的父元素display：flex；左右两边子元素设置宽度，中间的子元素设置为flex：1；就不需要使用定位。
so，要使用flex容器，需要使用两层，外面一层叫作flex容器（flex container），他的子元素称为项目（flex item）
看一下flex基本布局概念：
分为水平主轴（main axis），垂直交叉轴（cross axis）
flex容器
属性
1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content
1、flex-direction
表示项目的排列方向
flex-direction: row | row-reverse | column | column-reverse;
2、flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
3、flex-flow
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4、justify-content
定义了项目在x轴上的对其方式
justify-content: flex-start | flex-end | center | space-between | space-around;
5、align-items
定义项目在交叉轴上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
6、align-content
定义多根轴线对齐方式，如果只有一根轴线，此属性不起作用。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
flex item
上面是容器，现在写写项目
注意：设置flex之后，元素的float，clear，vertical-align都将失效。
flex项目有6个属性：
1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
1、order
order：integer；
用于定义项目的排列顺序，数值越小，越靠前，默认为0，可以调整项目在html中出现的顺序。
2、flex-grow
flex-grow：number；
定义了项目的放大比例，默认为0，即如果存在剩余空间，项目也不放大
如果一个项目的flex-grow属性为2，另一个项目为1，则前者占据的剩余空间将比后一项多一倍。
3、flex-shrink
flex-shrink：number；
定义了项目缩小比例，默认为1，即如果空间不足，改项目将缩小。
比如：
所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4、flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。类似于设置了width属性。
5、flex
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6、align-self
允许单个项目与其他项目有与其他项目不同的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，就相当于stretch。
css3多媒体查询
多媒体类型
all：用于所有的多媒体类型设备
print：用于打印机
screen：用于智能手机，平板，电脑屏幕
speech：用于屏幕阅读器
使用方法
第一种：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
比如：
<linkrel+"stylesheet" media="screen and (orientation: portrait)"href="portrait-screen.css"/>
//设置了媒体类型和媒体特性（显示屏， 纵向放置）
<linkrel="stylesheet"media="not screen and (orientation: portrait)"href="portrait-screen.css"/>
//非纵向放置的显示屏<linkrel="stylesheet"media="screen and (orientation: portrait) and (min-width:800px)"href="800wide-portrait-screen.css"/>//限制只有视口宽度大于800px像素的显示屏设备才能加载此文件
规定在某个设备时使用哪个样式表文件。
其中的
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备
第二种：
@media all and(min-width:800px){...}
@media后面接多媒体设备
比如：
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {...}
参考文章及资料
1、菜鸟教程