以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。
CSS3 动画属性
@keyframes : 规定动画
可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的
@keyframes mymove（mymove必须定义动画的名称在）
{
0% {top:0px; background:red; 100px;}
100% {top:200px; background:yellow; 300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; 100px;}
100% {top:200px; background:yellow; 300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; 100px;}
100% {top:200px; background:yellow; 300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; 100px;}
100% {top:200px; background:yellow; 300px;}
}
animation： 将动画与元素绑定
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name {规定需要绑定到选择器的 keyframe 名称
}
- animation-duration （规定完成动画所花费的时间，以秒或毫秒计 time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果）
- animation-timing-function{
规定动画的速度曲线
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
}
- animation-delay{
规定在动画开始之前的延迟
time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0
}
- animation-iteration-count{
规定动画应该播放的次数
n：定义动画播放次数的数值
infinite：规定动画应该无限次播放
}
- animation-direction{
规定是否应该轮流反向播放动画
normal：默认值。动画应该正常播放 ，
alternate：动画应该轮流反向播放
}
- animation-play-state{
规定动画是否正在运行或暂停animation-play-state: paused|running;
paused：规定动画已暂停
running：规定动画正在播放
}
- animation-fill-mode{
属性规定动画在播放之前或之后，其动画效果是否可见animation-fill-mode : none | forwards | backwards | both;
none：不改变默认行为
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both：向前和向后填充模式都被应用
}
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
CSS 背景属性
background在一个声明中设置所有的背景属性
background: #00FF00 url(bgimage.gif) red no-repeat fixed top;
- background-color（规定要使用的背景颜色）
- background-position（规定背景图像的位置）
- background-size（规定背景图片的尺寸）
- background-repeat（规定如何重复背景图像）
- background-origin（规定背景图片的定位区域）
- background-clip（规定背景的绘制区域）
- background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动）
- background-image（规定要使用的背景图像）
CSS 边框属性
- border：在一个声明中设置所有的边框属性。
- border-bottom：在一个声明中设置所有的下边框属性
- border-bottom-color：设置下边框的颜色
- border-bootom-style：设置下边框的样式
- border-bottom-width：设置下边框的宽度
- border-color：设置四条边框的颜色
- border-left：在一个声明中设置所有的左边框属性
- border-left-color：设置左边框的颜色
- .....还有border-top，border-right都是一样的效果之所上下左右边框的区别
- outline：在一个声明中设置所有的轮廓属性
- outline-color：设置轮廓的颜色
- outline-style：设置轮廓的样式
- outline-width：设置轮廓宽度
- border-bottom-left-radius：定义边框左下角的形状
- border-bottom-right-radius：定义边框右下角的形状
- border-image：简写属性，设置所有 border-image-* 属性
- border-image-outset：规定边框图像区域超出边框的量
- border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
- border-image-slice：规定图像边框的向内偏移
- border-image-source：规定用作边框的图片
- border-image-width：规定图片边框的宽度
- border-radius：简写属性，设置所有四个 border-*-radius 属性
- box-shadow：向方框添加一个或多个阴影
box属性
- overflow-x：如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪
- overflow-y：如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪
- overflow-style：规定溢出元素的首选滚动方法
- rotation：围绕由 rotation-point 属性定义的点对元素进行旋转
- rotation-point：定义距离上左边框边缘的偏移点
color属性
- color-profile：允许使用源的颜色配置文件的默认以外的规范
- opacity：允许使用颜色配置文件渲染意图的默认以外的规范
- rendering-intent：规定溢出元素的首选滚动方法
CSS 尺寸属性
- height：{
设置元素高度
auto：默认。浏览器会计算出实际的高度
length：使用 px、cm 等单位定义高度
%：基于包含它的块级对象的百分比高度
inherit：规定应该从父元素继承 height 属性的值
}
- max-height：设置元素的最大高度
- max-width：设置元素的最大宽度
- min-height:设置元素的最小高度
- min-设置元素的最小宽度
- 设置元素的宽度
可伸缩框属性
- box-align：{
规定如何对齐框的子元素box-align: start|end|center|baseline|stretch;
start：对于正常方向的框，每个子元素的上边缘沿着框的顶边放置，对于反方向的框，每个子元素的下边缘沿着框的底边放置
end：对于正常方向的框，每个子元素的下边缘沿着框的底边放置，对于反方向的框，每个子元素的上边缘沿着框的顶边放置
center：均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下
baseline：如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐
stretch：拉伸子元素以填充包含块
}
- box-direction：规定框的子元素的显示方向
- box-flex：规定框的子元素是否可伸缩
- box-flex-group：将可伸缩元素分配到柔性分组
- box-lines：规定当超出父元素框的空间时，是否换行显示
- box-ordinal-group：规定框的子元素的显示次序
- box-orient：规定框的子元素是否应水平或垂直排列
- box-pack：规定水平框中的水平位置或者垂直框中的垂直位置
css 字体属性
- color-profile：允许使用源的颜色配置文件的默认以外的规范
- opacity：允许使用颜色配置文件渲染意图的默认以外的规范
- rendering-intent：规定溢出元素的首选滚动方法
内容生成
- content：与 :before 以及 :after 伪元素配合使用，来插入生成内容
- conunter-increment：递增或递减一个或多个计数器
- conunter-reset：创建或重置一个或多个计数器
- quotes：设置嵌套引用的引号类型
Grid属性
- grid-columns：规定网格中每个列的宽度
- grid-rows：规定网格中每个列的高度
Hyperlink属性
- grid-columns：规定网格中每个列的宽度
- grid-rows：规定网格中每个列的高度
CSS 属性列表（List）
- list-style：在一个声明中设置所有的列表属性
- list-style-image：将图象设置为列表项标记
- list-style-position：设置列表项标记的放置位置
- list-style-type：设置列表项标记的类型