标签：
border-radius： 2em 1em 4em / 0.5em 3em; 兼容性IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
等价于：
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
css3背景：
background-origin：padding-box | content-box | border-box
背景图片相对什么来定位
注：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
background-size：percentage | px | cover | contain
背景图片大小
cover： 背景图片足够大，覆盖背景区域，可能导致背景图片显示不完全
contain：背景图片扩展至最大尺寸，完全适合背景区域
background-clip：padding-box | content-box | border-box
规定背景图片的绘制区域
多重背景：
background： url（），url（）；
文字效果
text-shadow 与 word-wrap
text-shadow：2px 2px 2px color;
水平偏移2px，垂直偏移2px，模糊距离2px
word-wrap： normal | break-word
强制文本换行：（单词可能会被拆分）
text-overflow： clip | ellipsis | string
string：用给定的字符串代表被修订的文本，（不知道怎么用）
word-break：normal | break-all | keep-all
规定非中日韩文字的打断方式
break-all：可以在任意位置打断
keep-all： 只能在半角空格或者连字符出打断
还有text-justify，text-wrap等现代浏览器不支持的文本属性
css3字体
@font-face
兼容性：IE9+仅支持.eot类型的文字
一：@font-face {
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
url(‘Sansation_Bold.eot‘); /* IE9+ */
font-weight:bold;
}
二：@font-face {
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
url(‘Sansation_Bold.eot‘); /* IE9+ */
}
一和二是两种不同的字体，只有在文本中设置为粗体时才会加载一：
必选参数：
font-family： name；
src： url；
可选参数：
font-weight ,font-stretch, font-style;
2D转换
transform：
IE6-8不支持；
其他加浏览器私有属性，兼容低版本（ff 和 opera不用）
:translate( x , y );单位px；
：scale（x ,y）放大或者缩小的倍数
：skew（x ,y）围绕X,Y奏翻转的角度，单位deg
matrix(）有六个参数，是2D转换的集合
transform-origin：（x-axis，y-axis，z-axis）
定义转换元素的初始位置：默认50%，50%；
x-axis，y-axis取值：left | center | right | length | %
z-axis: 取值 length
兼容性：
Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。
Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
3D转换：
以rotate为例子
rotateX( deg)，定义以X轴为中心的3d旋转
rotate3d（x,y, z）.
兼容性：
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
转换属性：
transform-style:flat | presever-3d
:flat;子元素不保留其3d位置
：preserve-3d ；子元素保留其3d位置
preserve：number | none；
请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
所有浏览器都不支持preserve，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
效果：-webkit-perspective:60; /* Safari and Chrome */
-webkit-perspective:120; /* Safari and Chrome */
backface-visibility： visible | hidden;
元素不面向屏幕时是否可见
兼容性：
只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
css3过渡
transition：property duration timing-function delay
delay：延迟动画开始时间，默认0；
那个元素需要过渡就给他设置transition；
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：例子：
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;
}
css3动画：
@keyframes 与animation
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
animation-delay：2s
2s：表示在原位置停留2s，2s后动画跳到对象正常运动2s所在的位置
-2s:动画立即在正常运动2s时的位置出现
-------------------------------------------------
animation-play-state：running | paused
js语法： object.style.animationPlayState="paused"
规定动画正在运行还是停止
想停就停，动画变的更容易控制了
animation-fill-mode：none | forward | backwards | both；
规定动画时间之外的状态
none：不改变默认行为。
forward ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backward ：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both ：向前和向后填充模式都被应用
举例：
div{
-webkit-animation-delay:2s;
}
对设置了 -webkit-animation-delay:2s;的对象，将延迟2s，然后立即跳到正常运动2s时所在的位置，
若设置了此处直接给divkeyframes中第一个关键帧中定义）animation-fill-mode：backward；动画2s后将从初始位置开始动画
多列布局
兼容性IE9及以下不支持，IE10+支持
主流浏览器加私有属性吧
column-count：列数
column-gap：列与列之间的间隔
colum-rule： 1px solid #ccc；还很多值，需要用到差手册
columns: 20px 3;列宽20px，分3列
column-span： 夸列数
column-fill ：主流浏览器都不支持
css3用户界面
新的用户界面特性包括重设元素尺寸，盒尺寸，轮廓等
resize：IE，android browser，IOS safari 都不支持
box-sizing： 只有IE6不支持
outline-offset：有用？？
新属性：
appearance： normal | icon | button | menu | filed | window
兼容性：所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
div{
appearance：button；//使div形同btn
}
值 描述
normal 将元素呈现为常规元素。
icon 将元素呈现为图标（小图片）。
window 将元素呈现为视口。
button 将元素呈现为按钮。
menu 将元素呈现为一套供用户选择的选项。
field 将元素呈现为输入字段。
chrome測試只有btn呈現btn狀；
重温 w3cshool css3
标签：
原文地址：http://www.cnblogs.com/wbengineer/p/4735388.html
