今天开始总结CSS3，很多东西在CSS笔录里都介绍过，所以这里做下精简即可，具体内容如下
【目录】
CSS3 被划分为模块，其中最重要的 CSS3 模块包括：
选择器，框模型，背景和边框，文本效果，2D/3D 转换，动画，多列布局，用户界面
下面来依次介绍
【详解】
（一）CSS3边框
边框属性：border-radius，box-shadow，border-image
①border-radius，box-shadow：
【兼容】
IE9+ 支持 border-radius 和 box-shadow 属性，Firefox、Chrome 以及 Safari 支持所有新的边框属性；
对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-；
Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-；
关于IE兼容CSS3的方案，我在之前文章http://570109268.iteye.com/blog/2407664里做过总结
【注意】
对于兼容IE写法有许多不足之处，.htc文件引入可以解决许多CSS3问题，例如边框阴影。但是无法调整颜色及无法设置内外阴影效果；
还有另外的一种针对IE的写法:
filter: progid（进程id）:DXImageTransform（DX图像转变）.Microsoft（微软）.Shadow（阴影） (color='#969696', Direction=135阴影角度, Strength=5阴影半径);/*for ie6,7,8*/
缺点很明显，就是无法单独设置某边的阴影及无法设置内外阴影效果；
②border-image：
【兼容】
IE11+，Firefox，Opera 15， Chrome 以及 Safari 6 支持 border-image 属性
Safari 5 支持替代的 -webkit-border-image 属性
【内容】
border-image 属性是一个简写属性，用于设置以下属性：
border-image-source路径，border-image-slice向内偏移，border-image-width宽度，
border-image-outset边框图像区域超出边框的量，border-image-repeat平铺(repeated)、铺满(rounded)或拉伸(stretched)
（二）背景
背景属性background-size，background-origin等
①background-origin背景起源
【兼容】IE9+及其他主流浏览器均支持
规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域
②background-clip背景修剪
【兼容】IE8+及其他主流浏览器均支持
规定背景的绘制区域，属性值：
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
③background-size背景尺寸
规定背景图像的尺寸，语法：
background-size: length（具体像素级宽高）|percentage（百分比设置宽高）|
cover（扩展覆盖，但显示不全）|contain（扩展到刚好适合内容区域）;
（三）文本效果
文本属性text-shadow，word-wrap
【兼容】
IE10+及其他主流浏览器均支持
①text-shadow 文本阴影效果
②word-wrap 强制文本进行换行 - 即使这意味着会对单词进行拆分
③word-break 规定自动换行的处理方法，可以让浏览器实现在任意位置的换行
④text-overflow 规定当文本溢出包含元素时发生的事情
text-overflow: clip（修剪文本）|ellipsis（省略号）|string（给定字符替代）;
（四）字体
@font-face 规则
【兼容】
IE8+及其他主流浏览器均兼容
【语法】
在新的 @font-face 规则中，首先定义字体的名称（比如 myFirstFont），然后指向该字体文件
例如，为 HTML 元素使用字体先通过 font-family 属性来引用字体的名称 (myFirstFont)
在 @font-face 规则中定义的所有字体描述符：
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range字符编码 | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
（五）2D转换transform
通过 CSS3 转换，能够对元素进行移动、缩放、转动、拉长或拉伸。
【兼容】
IE9 需要前缀 -ms-，Chrome 和 Safari 需要前缀 -webkit-，IE10+、Firefox 以及 Opera 支持 transform 属性
【 2D 转换方法】
translate移动，rotate旋转，scale缩放，skew倾斜，matrix矩阵变换
以上除了矩阵变换matrix()，其他属性我之前都做过总结
关于矩阵变换我在后面文章http://570109268.iteye.com/admin/blogs/2410928里做介绍
【转换属性】
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
（六）3D 转换
3D 转换方法：rotateX()，rotateY()
【兼容】
IE10和Firefox支持3D转换，Chrome和Safari需要前缀-webkit-，Opera仍然不支持 3D 转换（它只支持 2D 转换）
①rotateX() 方法
元素围绕其 X 轴以给定的度数进行旋转
②rotateY() 旋转
元素围绕其 Y 轴以给定的度数进行旋转
转换属性：
| transform | 向元素应用 2D 或 3D 转换 |
| transform-origin | 允许你改变被转换元素的位置 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示 |
| perspective | 规定 3D 元素的透视效果 |
| perspective-origin | 规定 3D 元素的底部位置 |
| backface-visibility | 定义元素在不面对屏幕时是否可见 |
（七）CSS3过渡
【兼容】
IE10+、Firefox、Chrome 以及 Opera 支持 transition 属性，Safari 需要前缀 -webkit-，Chrome 25 以及更早的版本，需要前缀 -webkit-
【注意】如果时长未规定，则不会有过渡效果，因为默认值是 0
【应用】
多项改变：如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开
div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
（八）动画
创建动画需要@keyframes 规则，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
【兼容】
IE10+、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性，Chrome 和 Safari 需要前缀 -webkit-
【内容】
一般用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成
为了得到最佳的浏览器支持，推荐始终定义 0% 和 100% 选择器
（九）多列（像报纸排版）
多列属性：column-count列数，column-gap间隙，column-rule规则
【兼容】
IE10+和Opera支持多列属性，Firefox 需要前缀 -moz-，Chrome 和 Safari 需要前缀 -webkit-
【内容】
①column-count列数
规定元素应该被分隔的列数，例如把 div 元素中的文本分隔为三列：
div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
②column-gap列隙
规定列之间的间隔，例如规定列之间 40 像素的间隔：
③column-rule列规则
设置列之间的宽度、样式和颜色规则，例如规定列之间的宽度、样式和颜色规则：
div{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
| column-count | 规定元素应该被分隔的列数。 |
| column-fill | 规定如何填充列。 |
| column-gap | 规定列之间的间隔。 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 |
| column-rule-color | 规定列之间规则的颜色。 |
| column-rule-style | 规定列之间规则的样式。 |
| column-rule-width | 规定列之间规则的宽度。 |
| column-span | 规定元素应该横跨的列数。 |
| column-width | 规定列的宽度。 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 |
（十）用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
用户界面属性：resize，box-sizing，outline-offset轮廓偏移
【兼容】
①resize调整属性：除IE和Opera外，其他浏览器均兼容
②box-sizing主流浏览器均兼容，火狐需要加hack写法-moz-box-sizing
③outline-offset轮廓偏移，除IE外，其他浏览器均兼容
【拓展】
①.htc
IE利用VML矢量可标记语言作为画笔绘出圆角：下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的 HTML文件，.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去
②自动换行 word-break:break-all和word-wrap:break-word区别
word-break:break-all
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
word-wrap:break-word
例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
.