以下为最近总结的CSS属性列表，这里做下笔记
CSS属性组目录列表：
1 . 动画；2 . 背景；3 . 边框和轮廓；4 . Box盒子属性；5 . 可伸缩框；6 . 字体；7 . 表格属性；
8 . 文本属性；9 . 2D/3D 转换属性transform； 10 . 过渡属性transition；
11 . 用户界面属性（User-interface）；
下面具体介绍下各个属性
（1 . 动画）
【简介】
动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数
一般使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器
【兼容】
IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-
【主要内容】
1. CSS3的@keyframes 规则； 2. animation 属性及它所配置的6个动画属性
①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；
④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向
【详解】
具体我在后面文章http://570109268.iteye.com/admin/blogs/2410427里做了总结
（2 . CSS背景属性）
①background-attachment背景附件------设置背景图像是否固定或者随着页面的其余部分滚动；
常见用法：设置固定的背景图像，使图像不会随着页面的其他部分滚动
②background-clip背景修剪------规定背景的绘制区域；
③background-origin背景来源------规定 background-position 属性相对于什么位置来定位；
属性值：与背景修剪属性值相同，border-box边界框；padding-box填充盒；content-box内容盒
④background-size背景尺寸------规定背景图像的尺寸；
【详解】具体我在后面文章http://570109268.iteye.com/admin/blogs/2410426里做了总结
（3 . 边框和轮廓）
①outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
【兼容】IE8及其他主流浏览器均支持
注意：轮廓线不会占据空间，也不一定是矩形，outline 简写属性在一个声明中设置所有的轮廓属性
可以按顺序设置如下属性：outline-color，outline-style，outline-width
<style type="text/css">
p {
border:1px solid red;
outline:6px dotted #00ff00;
}
</style>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本）
才支持 outline 属性。</p>
【拓展：轮廓偏移outline-offset 】
outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
兼容：除了IE外，其他主流浏览器均兼容
案例：在边框边缘之外 15 像素处的绘制轮廓
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
②圆角属性
border-top-left-radius------定义边框左上角的圆角；border-top-right-radius------定义边框右上角的圆角；
border-bottom-left-radius------定义边框左下角圆角；border-bottom-right-radius------定义边框右下角圆角
③阴影属性
box-shadow------向方框添加一个或多个阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
【兼容】IE9+及其他主流浏览器均支持
【IE兼容方案】①引入.htc文件；②使用IE的Shadow滤镜。
具体我在后面文章http://570109268.iteye.com/blog/2407672里做了总结
| h-shadow | 必需，水平阴影的位置。允许负值（正值向右，负值向左） | 测试 |
| v-shadow | 必需，垂直阴影的位置。允许负值（正值向下，负值向上） | 测试 |
| blur | 可选，模糊距离 | 测试 |
| spread | 可选，阴影的尺寸 | 测试 |
| color | 可选，阴影的颜色 | 测试 |
| inset | 可选，将默认的外部阴影 (outset) 改为内部阴影 | 测试 |
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0
（4 . Box盒子属性）
①overflow-x 水平滚动；
②overflow-y 垂直滚动；
③overflow-style 规定溢出元素的首选滚动方法（目前无浏览器支持）；
④rotation 围绕由rotation-point属性定义的点对元素进行旋转（目前无浏览器支持）；
⑤rotation-point 定义距离上左边框边缘的偏移点（目前无浏览器支持）；
（5 . 可伸缩框Flexible Box）
①box-align 规定如何对齐框的子元素
（6 . 字体属性）
| font | 在一个声明中设置所有字体属性 |
| font-family | 规定文本的字体系列 |
| font-size | 规定文本的字体尺寸 |
| font-size-adjust | 为元素规定 aspect 值（IE不支持） |
| font-style | 规定文本的字体样式 |
| font-variant | 规定是否以小型大写字母的字体显示文本 |
| font-weight | 规定字体的粗细 |
①font-size-adjust -------为元素规定 aspect 值，为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height
字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读
举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读
②font-weight--------设置显示元素的文本中所用的字体加粗
数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗
属性值：normal---默认值，定义标准的字符；bold---定义粗体字符；bolder---定义更粗的字符；lighter---定义更细的字符；100--900定义由粗到细的字符
（7 . 表格属性）
目录：
①border-collapse合并边框；②border-spacing边框间距；③caption-side标题端；④empty-cells空白单元格
⑤table-layout表格布局；
以下为详解：
①border-collapse属性设置表格的边框是否被合并为一个单一的边框；
属性值：
separate（分离）默认值，边框会被分开。且不会忽略 border-spacing 和 empty-cells 属性
collapse（塌方）边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
②border-spacing设置相邻单元格的边框间距离（仅用于“边框分离”模式）；
属性值：在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔
除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承
③caption-side规定表格标题的位置；
<style type="text/css">
caption{
caption-side:bottom
}
</style>
<table border="1">
<caption>这是一个标题</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>
④empty-cells 规定是否显示表格中的空单元格上的边框和背景（仅用于“分离边框”模式）
属性值：
hide---不在空单元格周围绘制边框；show---默认值，在空单元格周围绘制边框
⑤table-layout 设置用于表格的布局算法（固定表格布局，自动表格布局）
属性值：automatic默认，列宽度由单元格内容设定；fixed列宽由表格宽度和列宽度设定。
固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关
自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容
（8 . 文本属性）
关于文本属性详解，我在后面文章http://570109268.iteye.com/admin/blogs/2410569里做了总结
（9 . 2D/3D 转换属性transform）
关于2D/3D 转换详解，我在后面文章http://570109268.iteye.com/blog/2410700里做了总结
（10 . 过渡属性transition）
【兼容】IE10+及其他主流浏览器，Safari 支持hsck写法的 -webkit-transition
①transition 简写属性，用于在一个属性中设置四个过渡属性，主要包含
transition-property---过渡属性名称（设置过渡效果的 CSS 属性的名称，例宽高背景色等）
transition-duration---过渡时长
transition-timing-function---过渡时间函数
transition-delay---过渡延迟
案例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px
<style type="text/css">
div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover{
width:300px;
}
</style>
<div></div>
<p>把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效</p> ②transition-timing-function 规定过渡效果的时间曲线
语法：transition-timing-function: linear（匀速）|ease（慢快慢）|ease-in（慢速开始）|ease-out（慢速结束）|ease-in-out（慢速开始和结束）|cubic-bezier(n,n,n,n)（定义值，可能的值是 0 至 1 之间的数值）;
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,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)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
（11）用户界面属性（User-interface）
①appearance（外观）设置元素外观，使元素看上去像标准的用户界面元素
【兼容】所有主流浏览器都不支持 appearance 属性，Firefox 支持替代的 -moz-appearance 属性，Safari 和 Chrome 支持替代的 -webkit-appearance 属性
例如：使div呈现按钮样式
<style type="text/css">
div {
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
</style>
<div>一些文本</div>
属性值：appearance: normal（正常）|icon（图标）|window（窗口）|button（按钮）|menu（选项）|field（字段）;
②box-sizing 属性通过指定容器的盒子模型类型，达到不同的展示效果
属性值：content-box内容块；border-box盒模型
content-box的宽高为元素的内容框，在宽高外绘制外边距和边框；
border-box的宽高包含内边距和边框
适用场景：
例如百分比为宽度的容器设置padding时,容器的宽度就会像外扩展相应的padding值,要使宽度不被撑开,那么就是用box-sizing:border-box;会控制这种情况
具体案例详解我在后面文章http://570109268.iteye.com/admin/blogs/2410754里做了总结
③resize（调整）规定是否可由用户对元素的尺寸进行调整
注意：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
【兼容】测试后IE不支持，chrome，Opera等均支持，Safari暂时未测
属性值：none（禁止调整尺寸）|both（宽高都可以调整）|horizontal（横/调整宽）|vertical（垂直/调整高）
案例：可以由用户调整 div 元素的大小
<style type="text/css">
div{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
}
</style>
<div>resize 属性规定是否可由用户调整元素尺寸</div>
【总结】
①关于animation-fill-mode动画填充模式，还有很多问题，我在后面再做介绍
.