CSS查漏补缺【未完】

1.层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

注：外部样式表：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

2.CSS样式

背景

　　1.背景色

　　　　如果希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

　　可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

　　background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是　说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

　　2.背景图像

　　 background-image

　　 3.背景重复

　　 background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

　　　4.背景定位

　　　　为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

　　位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是 center。

　　百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

　　长度值这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

5.背景关联

　　background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

　　　　6.设置文字背景颜色

　　　　单独用标签包裹，然后加样式

　　　　7.集合样式

　　　　background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

文本

　　　　1.缩进　

　　　　text-indent　　　

　　　　一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

　　　　提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

　　　　text-indent 属性可以继承

　　　　2.对齐

　　　　text-align

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

　　　　3.字母间隔　　　　

　　　　word-spacing

　　　　可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

　　　　4.字符转换　　　　

text-transform 属性

　　　　　处理文本的大小写。这个属性有 4 个值：　　　　　

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

　　　　5.文本修饰

　　　　text-decoration

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

　　　　6.处理空白符

　　　　white-space

　　　　例如：normal 丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

　　　　　　7.文本方向

　　　　　　direction 　　　　　　　

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

<html>

<head>

<style type="text/css">

div.one

{

direction: rtl

}

div.two

{

direction: ltr

}

</style>

</head>

<body>

<div class="one">Some text. Right-to-left direction.</div>

<div class="two">Some text. Left-to-right direction.</div>

</body>

</html>

　　　　　　　8.文本溢出

　　　　　　　　　　overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

字体　　　　　

　　　font-family

　　　CSS 定义了 5 种通用字体系列：(自己看着前两种舒服些)

　　　　　　Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体

　如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题：

　　　　 h1 {font-family: Georgia, serif;}

　　　　只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

font-style

　　　　　字体风格

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

　　　　font-variant

　　　　属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

　　　　font-weight 属性

　　　　设置文本的粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

　　　　　font-size 属性

　　　　　设置文本的大小。

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

　　　　　　所有字体的属性设置在一个申明内

　　　　　　font:italic bold 12px/30px arial,sans-serif;

链接

　　　　　　四种状态顺序　　　　

a:link {color:#FF0000;}        /* 未被访问的链接 */

a:visited {color:#00FF00;}    /* 已被访问的链接 */

a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}    /* 正在被点击的链接 */

　　　　　　　文本修饰

　　　　　　　text-decoration 属性大多用于去掉链接中的下划线：　

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

　　　　　　background-color 属性规定链接的背景色

表格

　　　　　　border-collapse

　　　　　　属性设置是否将表格边框折叠为单一边框：

table

  {

  border-collapse:collapse;

  }

table,th, td

  {

  border: 1px solid black;

  }

注：表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

　　　　　　　　border-spacing

　　　　　　　　设置分隔单元格边框的距离。单元格与外边框

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit	规定应该从父元素继承 border-spacing 属性的值。

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个 length 参数，那么定义的是水平和垂直间距。

如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit

规定应该从父元素继承 border-spacing 属性的值。

　　　　　　empty-cells

　　　　　　设置是否显示表格中的空单元格

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

　　　　　　tableLayout 属性

　　　　　　用来显示表格单元格、行、列的算法规则。　　　　　　

automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

3.框模型

　　　　　　border-style

　　　　边框样式

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-color 属性

　　　　边框没有样式，就没有宽度。不过有些情况下希望创建一个不可见的边框。

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

4.定位

　　　　相对定位

　　　　如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

　　　　注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位

　　　　绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

　　　　　float

　　　　http://www.cnblogs.com/wangfupeng1988/p/4314160.html

5.选择器

元素选择器 id选择器类选择器

　　　　属性选择器　　　

　　　　例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

　　　　　　a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

　　　　　　后代选择器

　　　　　　子元素选择器 >

　　　　　　相邻兄弟选择器 +

　　　　　　伪类

　　　　　　　　　　锚伪类 :link :visited :hover :active

　　　　　　　　　　p:firs-child 伪类第一个P元素

　　　　　　　　　　input :focus 伪类向拥有键盘输入焦点的元素添加样式。

　　　　　　　伪元素　　　　用于向某些选择器设置特殊效果用于块元素

　　　　　　　　　　　　:first-line 伪元素用于向文本的首行设置特殊样式。

　　　　　　　　　　　　:first-letter 伪元素用于向文本的首字母设置特殊样式。

　　　　　　　　　　　　:before

　　　　　　　　　　　　:after

6.高级

　　　　　　水平对齐

　　　　　　　　　　　　1>可通过将左和右外边距设置为 "auto"，来对齐块元素达到居中效果

　　　　　　　　　　　　 2>使用绝对定位

　　　　　　　　　　　　 3>使用 float 属性

　　　　　　　分类属性样式补充

　　　　　　　　　　　　1>clear 属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

　　　　　　　　　　　　2>cursor 属性规定要显示的光标的类型（形状）。

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

　　　　　　　　　　　　3>visibility 属性规定元素是否可见。提示：即使不可见的元素也会　占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

　　　　　　　　透明度　　　　　　　　　　　　　　

　　　　　　　　　　IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

　　　　　　　　　　IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

　　　　　　　　媒介类型

　　　　　　　　　　@media 　在相同的样式表中，使用不同的样式规则来针对不同的媒介。

　7.CSS3

　　　　　　　　模块　　

　　　　　　　　选择器框模型背景和边框　文本效果 2D、3D效果动画多列布局用户界面

　　　　　　　　边框

　　　　　　　　　　　border-radius 圆角

　　　　　　　　　　　box-shadow：阴影 h-shadow v-shadow blur spread color inset;　　　　　　　　　　　　　　　　　　　　　　　　　　　

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试

　　　　　　　　　 border-image 属性是一个简写属性，用于设置以下属性：

值	描述	测试
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	测试

　　　　　　　　　背景

　　　　　　　　　　　background-size 属性规定背景图像的尺寸。　　　　　　　　　　　　

值	描述	测试
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

　　　　　　　　　　　　background-origin 属性规定 background-position 属性相对于什么位置来定位。　　　　　

值	描述	测试
padding-box	背景图像相对于内边距框来定位。	测试
border-box	背景图像相对于边框盒来定位。	测试
content-box	背景图像相对于内容框来定位。	测试

　　　　　　　　　　　　background-clip 属性规定背景的绘制区域。

值	描述	测试
border-box	背景被裁剪到边框盒。包括边框	测试
padding-box	背景被裁剪到内边距框。包括padding	测试
content-box	背景被裁剪到内容框。只是内容区	测试

　　　　　　　　　文本效果

　　　　　　　　　　　　　　text-overflow 属性规定当文本溢出包含元素时发生的事情。　　　　　　　

值	描述	测试
clip	修剪文本。	测试
ellipsis	显示省略符号来代表被修剪的文本。	测试
string	使用给定的字符串来代表被修剪的文本。

　　　　　　　　　　　　　　text-shadow 属性向文本设置阴影。　text-shadow: h-shadowv-shadowblurcolor;

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊的距离。	测试
color	可选。阴影的颜色。参阅 CSS 颜色值。	测试

　　　　　　　　　　　　　　text-wrap 属性规定文本的换行（折行）规则。

值	描述
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。

　　　　　　　　　　　　　　word-break 属性规定自动换行的处理方法。提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

　　　　　　　　　　　　　　　　word-wrap 属性允许长单词或 URL 地址换行到下一行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

　　　　　　　　字体

　　　　　　　　　　　　在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

font-weight:bold;

}

div

{

font-family:myFirstFont;

}

</style>

　　　　　　　　2D转换　　　　　　　　　

　　　　　　　　　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。各种函数写在transform内部。

　　　　　　　　　　兼容　　　　　　　　　　　　　

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg);        /* IE 9 */

-webkit-transform: rotate(30deg);    /* Safari and Chrome */

-o-transform: rotate(30deg);        /* Opera */

-moz-transform: rotate(30deg);        /* Firefox */

}

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

　　　　　　　　　　transform-origin 属性允许您改变被转换元素的位置。上述变化的时候的基点。　　　　　　　　　　

　　　　　　　　3D转换

　　　　　　　　　　兼容

　　　　　　　　　　Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

　　　　　　　　backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。　　　　　　

值	描述
visible	背面是可见的。
hidden	背面是不可见的。

　　　　　　　过渡

　　　　　　　　　　transition 属性是一个简写属性，用于设置四个过渡属性： transition: property（属性名）duration（时间）timing-function（效果）delay（延迟）;

　　　　　　　　　　一步设置

　　　　　　　　　　transition-property 属性规定应用过渡效果的 CSS 属性的名称。

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

　　　　　　　　　　transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。　　　　　　　　　

　　　　　　　　　　transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

值	描述
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)	在 cub

　　　　　　　　　　　　transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。

　　　　　　　　动画

　　　　　　　　　　animation 属性是一个简写属性，用于设置六个动画属性：animation: namedurationtiming-functiondelayiteration-countdirection;

　　　　　　　　　　　　animation-timing-function 规定动画的速度曲线。

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

　　　　　　　　　animation-iteration-count 属性定义动画的播放次数。

值	描述	测试
n	定义动画播放次数的数值。	测试
infinite	规定动画应该无限次播放。

　　　　　　　　　　animation-direction 属性定义是否应该轮流反向播放动画。

值	描述	测试
normal	默认值。动画应该正常播放。	测试
alternate	动画应该轮流反向播放。

　　　　　　　　　　　兼容

　　　　　　　　　　Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

　　　　　　　　　　步骤

　　　　　　　　　　1>在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称规定动画的时长

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s;    /* Firefox */

-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */

-o-animation: myfirst 5s;    /* Opera */

}

　　　　　　　　　　2>调用动画名称，设置样式

@keyframes myfirst

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}