一、什么是CSS3
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。
兼容前缀：
二、内容摘要
1 border-radius 圆角效果
2 box-shadow 阴影
3 border-image 边框图片
4 color:rgba(R,G,B,A) 颜色透明度
5 linear-gradient(to top left,orenge,red,yellow,blue,green,gray) 渐变色
6 text-overflow:clip | ellipsis (直接切去文本溢出部分 | 用...表示溢出部分)要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
如下：
text-overflow:ellipsis;
white-spacing:nowrap;
overflow:hidden;
7 word-wrap:normal | break-word; 控制长单词是否断开换行
8 @font-face{
font-family:字体名称;
src:服务器上该字体的路径
}
嵌入服务器字体，使用时与普通字体一样，直接引用字体名称即可
9 text-shadow:X-Offset Y-Offset blur color; (水平偏移 垂直偏移 模糊程度 阴影颜色) 设置字体阴影
10 background-origin:border-box | padding-box | content-box; 设置背景图片的起始位置
11 background-clip:border-box | padding-box | content-box | no-clip;对背景图片进行裁切，只显示盒子内的部分
12 background-size:auto | <长度值> | <百分比> | cover | contain;
13 background参数设置多重背景(origin clip size repeat)
14 CSS3选择器
(1)属性选择器
(2)伪类选择器
:root 选择根元素，html文档里的根元素始终是<html>
:not 选择除该元素之外的元素
:empty 选择空元素( 空格不算空元素 )
:target 选择目标元素(匹配url目标<a href="#id1"></a> <p id="id1"></p> 则 #id1:target匹配<p id="id1"></p>中的样式)
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(n) 选择第n个子元素
:nth-last-child(n) 选择倒数第n个子元素
:first-of-type 选择第一个某类型的子元素（.wrap > p:first-of-type{} 选中.wrap类第一个p元素）
:last-of-type 选择最后一个某类型的子元素
:nth-of-type(n) 选择第n个某类型的子元素
:nth-last-of-type(n) 选择倒数din个某类型的子元素
:only-child 选择的该元素为父元素的唯一子元素
:only-of-type 选择的该元素为父元素的某类型的唯一子元素
:enabled 选择可用状态的元素
:disabled 选择不可用状态的元素
:checked 选择选中状态的元素（checkbox,radio）
::selection 选择鼠标选中的文本
:read-only 选择只读状态的文本框
:read-write 选择非只读状态的文本框
::before 在元素前插入内容
::after 在元素后插入内容
变形记：
15 rotate(45deg); 顺时针旋转45度
16 skew(x,y) 在水平方向和垂直方向进行扭曲
17 scale(x,y) 在水平方向和垂直方向进行缩放
18 translate(x,y) 在水平方向和垂直方向进行位移
19 transition:property duration timing-function delay; 设置过渡的动画效果（CSS属性 过渡时长 过渡函数 延迟出现的时长）
过渡函数如图：
20 @keyframes 动画名{
from{}to{}
}
类似flash关键帧，样式从from{}到to{}，也可以设置从0%{}到100%{}
调用动画animation-name:动画名;
动画时长animation-duration:10s;
播放方式animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out;
播放方向animation-direction:normal | alternate;
播放次数animation-iteration-count:infinite | <number>;
播放状态animation-play-state:running | pasused
动画开始前和结束后的属性设置animation-fill-mode:none | forwards | backwards | both;
21 布局样式
columns:200px 2; /*分成两列，每列宽200px*/
拆开写——
列宽column-width:auto | <length>;
列数column-count:auto | <integer>;
列间距column-gap:normal | <length>;
列样式column-rule:2px dotted green; /*貌似列的边框样式：线宽，线形，线颜色*/
跨列显示column-span:none | all;
教程地址：http://www.imooc.com/learn/33
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
