小薇学院任务十二（CSS3）
目录
1.CSS3边框
border-radius
box-shadow
border-image
border-image-slice
border-image-outset
border-image-repeat
2.CSS3背景
background-size
background-origin
background-clip
多重背景
3.CSS3文本效果
hanging-punctation
text-align-last
text-emphasis
text-emphasis-style
text-emphasis-color
text-justify
text-outline
text-overflow
text-shadow
text-wrap
word-break
word-wrap
4.CSS3字体效果
@font-face
5.CSS3 2D转换
matrix()
translate()
scale()
rotate()
skew()
6.CSS3 3D转换
transform-style
perspective
perspective-origin
backface-visibility
translate3d()
scale3d()
rotate3d()
7.CSS3过渡
transition
transition-property
transition-duration
transition-time-function
transition-delay
8.CSS3动画
animation
@keyframes
9.CSS3多列
column-count
column-gap
column-rule
10.CSS3用户界面
resize
box-sizing
outline-offset
1.CSS3 边框
border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。即使元素没有边框，圆角也可以用到background上面，具体效果受background-clip影响。
半径的第一个语法取值可取1~4个值:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left
半径的第二个语法取值也可取1~4个值
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
border-radius: inherit
box-shadow CSS属性以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素设置了border-radius，阴影也会有圆角效果。多个阴影的z-ordering和多个text-shadows规则相同（第一个阴影在最上面）。
Values
inset
默认阴影在边框外。
使用inset后，阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length> 。如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
<color>
相关事项查看 <color> 。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
border-image CSS属性允许在元素的上边框绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style
属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。
特别注意，若 border-image-source
（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。
初始值：
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0s
border-image-repeat: stretch
The border-image-slice CSS property divides the image specified by border-image-source
in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.
border-image-outset CSS属性定义边框图像可超出边框盒的大小。
border-image-repeat CSS属性定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。
Values
type
stretch, repeat, round, space 选一。属于单个值的情况。
horizontal
stretch, repeat, round, space 选一。属于两个值的情况。
vertical
stretch, repeat, round, space 选一。属于两个值的情况。
stretch
拉伸图片以填充边框。
repeat
平铺图片以填充边框。
round
类似于repeat，不过是整数次平铺。
inherit
继承父级元素的计算值。
2.CSS3 背景
background-size CSS属性规定背景图片的尺寸。如果在设置 background-size 之后 background
又没有设置此属性，那么此属性取默认值（译注：css同一属性后面的覆盖前面的）。
/* 关键字 */
background-size: cover
background-size: contain
/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto /* 不同于b
Values
<length>
<length>值指定背景图片大小，不能为负值。
<percentage>
<percentage> 值，指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
auto
以背景图片的比例缩放背景图片。
cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
contain
缩放背景图片以完全装入背景区，可能背景区部分空白。
位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。同时还可以设置多重背景图片。
background-origin CSS属性规定了指定背景图片background-image
属性的原点位置的背景相对区域.
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。
values
border-box
背景将会延伸到延伸到外边界的边框，而且是「边框在上、背景在下」，这个用border-style 为dashed可以直接看得出来。
padding-box
背景描绘在padding盒子，边框里不会有背景出现。同样，背景将会延伸到最外边界的padding.
content-box
背景描绘在内容区范围.
background-clip CSS属性规定背景的绘制区域。
values
border-box
背景延伸到边框外沿（但是在边框之下）。
padding-box
边框下面没有背景，即背景延伸到内边距外沿。
content-box
背景裁剪到内容区 (content-box) 外沿。
多重背景
注意一点，写在前面的图片拥有更高的z-ordering。
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
3.CSS3 文本效果
hanging-punctuation CSS属性规定标点字符是否位于线框之外。
还没有得到主流浏览器的支持。
text-align-last CSS属性设置如何对齐最后一行或紧挨着强制换行符之前的行。
The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.
Values
auto
The affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-align-last to start.
start
The same as left if direction is left-to-right and right if direction is right-to-left.
end
The same as right if direction is left-to-right and left if direction is right-to-left.
left
The inline contents are aligned to the left edge of the line box.
right
The inline contents are aligned to the right edge of the line box.
center
The inline contents are centered within the line box.
justify
The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
text-emphasis CSS属性向元素的文本应用重点标记以及重点标记的前景色。目前使用时加上浏览器厂商前缀(vendor prefix)。
The text-emphasis CSS property is a shorthand property for setting text-emphasis-style
and text-emphasis-color
in one declaration. This property will apply the specified emphasis mark to each character of the element's text, except separator characters, like spaces, and control characters.
The text-emphasis property is quite different from text-decoration
. The text-decoration property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents.
The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.
Initial Value
text-emphasis-style: none
text-emphasis-color: currentColor
The text-emphasis-style CSS property defines the type of emphasis used. It can also be set, and reset, using the text-emphasis
shorthand.
Values
none
No emphasis marks.
filled
The shape is filled with solid color. If neither filled nor open is present, this is the default.
open
The shape is hollow.
dot
Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).
circle
Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB).
double-circle
Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).
triangle
Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).
sesame
Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46).
<string>
Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.
The text-emphasis-color CSS property defines the color used to draw an emphasis mark. It can also be set, and reset, using the text-emphasis
shorthand.
text-justify CSS属性规定当 text-align 设置为 "justify" 时所使用的对齐方法。(不支持Chrome和IE)
Values
none
The text justification is turned off — this has the same effect as not setting text-align
at all, although it is useful if you need to turn justification on and off for some reason.
auto
The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g. English, CJK languages, etc.). This is the default justification used if text-justify is not set at all.
inter-word
The text is justified by adding space between words (effectively varying word-spacing
), which is most appropriate for languages that separate words using spaces, like English or Korean.
inter-character
The text is justified by adding space between characters (effectively varying letter-spacing
), which is most appropriate for languages like Japanese.
text-outline CSS属性规定文本的轮廓(并没有得到主流浏览器的支持)。目前，可以使用outline来实现想类似的效果。
text-overflow CSS属性规定当文本溢出包含元素时发生的事情。text-overflow CSS属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。
一般在容器的极限处进行截断。如果想在裁剪处显示空白符，可以使用 ('').
这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了"white-space:nowrap")，或者一个单词因为太长而不能合理地被安置(fit)。
这个属性并不一定要求“溢出”事件发生；为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将overflow
设置为hidden"。（同时在某些时候加上whitespace: nowrap 来取消换行，使得效果得以显现。）
Values
clip
这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断，你必须使用一个空字符串值 ('')(To truncate at the transition between two characters, the empty string value ('') must be used.)。此为默认值。
ellipsis
这个关键字的意思是“用一个省略号 ('…', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号的容纳下，那么这个省略号也会被截断。
text-shadow CSS属性为文字添加阴影。可以为文字与text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影指定相对于文字的偏移量，可选的颜色及模糊半径。多个阴影从前往后叠加，第一个阴影在最前面。
该属性也可以应用到微元素 ::first-line 与 ::first-letter上。
Values
<color>
可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。
Note: 如果想确保跨浏览器的一致性，请明确地指定一种颜色
<offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。<offset-x>
指定水平偏移量，若是负值则阴影位于文字左边。 <offset-y>
指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了<blur-radius> 则会产生模糊效果
)。可用单位请查看 <length>
。
<blur-radius>
可选。这是 <length>
值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
text-wrap CSS属性规定文本的换行规则。(目前的主流浏览器都不支持)
word-break CSS 属性 word-break 指定了怎样在单词内断行。
Values
normal
使用默认的断行规则。
break-all
对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行。
keep-all
CJK 文本不断行。 Non-CJK 文本表现同 normal。
word-wrap CSS属性允许对长的不可分割的单词进行分割并换行到下一行。
Value
normal
只在允许的断字点换行（浏览器保持默认处理）。
break-word
在长单词或URL地址内部进行换行。
4.CSS3 字体效果
@font-face: 这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
语法
@font-face {
[ font-family: <family-name>; ] ||
[ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
[ unicode-range: <urange>#; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: normal | <feature-tag-value>#; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <weight>; ] ||
[ font-style: <style>; ]
}
where
<family-name> = <string> |
Values
font-family
所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )
src
URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local()
syntax. If that font isn't found, other sources will be tried until one is found.
font-variant
A font-variant
value.
font-stretch
A font-stretch
value.
font-weight
A font-weight
value.
font-style
对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。
unicode-range
在该@font-face中定义的unicode字体范围
下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。
@font-face {
font-family: myFirstFont;
src: local("Times New Roman");
font-weight:normal;
}
@font-face {
font-family: myFirstFont;
src: local(Consolas);
font-weight:bold;
}
注意
<li>这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。</li>
<li>你不能在一个 CSS 选择器中定义 @font-face 。例如，这样写是无效的：</li>
.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}
5.CSS3 2D转换
The transform attribute defines a list of transform definitions that are applied to an element and the element's children. The items in the transform list are separated by whitespace and/or commas, and are applied from right to left.
matrix()
matrix(a b c d e f )
This transform definition specifies a transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix
matrix(a b c d e f)
which maps coordinates from a new coordinate system into a previous coordinate system by the following matrix equalities:
translate()
translate(<x> [<y>])
This transform definition specifies a translation by x and y. This is equivalent to matrix(1 0 0 1 x y). If y is not provided, it is assumed to be zero.
scale()
scale(<x> [<y>])
This transform definition specifies a scale operation by x and y. This is equivalent to matrix(x 0 0 y 0 0). If y is not provided, it is assumed to be equal to x.
rotate()
rotate( a [<x> <y>])
This transform definition specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotate is about the origin of the current user coordinate system. The operation corresponds to the matrix
If optional parameters x and y are supplied, the rotate is about the point (x, y). The operation represents the equivalent of the following transform definitions list: translate(<x>, <y>) rotate(a) translate(-<x>, -<y>).
skew()
skewX(a)
This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix
skewY(a)
This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix
transform CSS属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。
Values
<transform-function>
至少一个 CSS transform functions 被应用.
none
指定为 不应用transform
transform-origin CSS属性让你更改一个元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。
没有明确定义的值会被重设回他们对应的值（Not explicitly set values are reset to their corresponding values.）
/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;
/* 双值语法 */
/* 用两个数字值先水平后垂直，用一个数值一关键字或两关键字不强求顺序 */
transform-origin: 3cm 2px; /* x-offset y-offset */
transform-origin: 2px left; /* y-offset x-offset-keyword */
transform-origin: left 2px; /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */
/* 三值语法 */
transform-origin: 2px 30% 10px; /* x-offset y-offset z-offset */
transform-origin: 2px left 10px; /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px; /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */
Values
x-offset
定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。
offset-keyword
left，right，top，bottom或center中之一，定义相对应的变形中心偏移。
y-offset
定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。
x-offset-keyword
left，right或center中之一，定义相对应的变形中心偏移。
y-offset-keyword
top，bottom或center中之一，定义相对应的变形中心偏移。
z-offset
定义变形中心距离用户视线（z=0处）的<length>（不能是<percentage>）偏移值。
关键字是方便的简写方法，等同于以下<percentage>值:
keyword value
left 0%
center 50%
right 100%
top 0%
bottom 100%
6.CSS 3D转换
transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
如果被扁平化，则子元素不会独立的存在于三维空间。
因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。
Values
preserve-3d
指定子元素定位在三维空间内。
flat
指定子元素位于此元素所在平面内。
The perspective CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
Value
Is a <length> giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.
perspective-origin CSS属性指定了观察者的位置，在属性perspective中被用作消失点
Values
x-position
指定消失点的横坐标，其值有以下形式：
<percentage>
百分比，相对于元素宽度，可为负值。
<length> 长度值，可为负值。
left，
关键字，0值的简记。
center，
关键字，50%的简记。
right，
关键字，100%的简记。
y-position
指定消失点的纵坐标，其值有以下形式：
<percentage> 百分比，相对于元素的高度，可为负值。
<length> 长度值，可为负值。
top，
关键字，0值得简记。
center，
关键字，50%的简记。
bottom，关键字，100%的简记。
backface-visibility CSS属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。
在某些情况下，我们不希望元素内容在背面可见，比如实现翻牌效果。
因为2D变换无透视效果，故该属性对2D变换无效。
Value
visibility
关键字，指定元素背面是否可见，可为以下值：
visible 表示背面可见，允许显示正面的镜像。
hidden 表示背面不可见。
translate3d() CSS 函数在3D空间内移动一个元素的位置. 这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。
Values
tx
是一个 <length> 代表移动向量的横坐标.
ty
是一个<length> 代表移动向量的纵坐标.
tz
是一个 <length> 代表移动向量的z坐标。它不能是<percentage> 值; 那样的移动是没有意义的。
translateX
translateY
translateZ
The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.
This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.
When outside the [-1, 1] range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to 1 it does nothing and when negative it performs a point reflection and the size modification.
Values
sx
Is a <number> representing the abscissa of the scaling vector.
sy
Is a <number> representing the ordinate of the scaling vector.
sz
Is a <number> representing the z-component of the scaling vector.
scaleX
scaleY
scaleZ
rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。
在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 transform-origin
CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。
Values
x: <number> 类型， 表示旋转轴X坐标方向的矢量。
y: <number> 类型， 表示旋转轴Y坐标方向的矢量。
z: <number> 类型， 表示旋转轴Z坐标方向的矢量。
a: <angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
rotateX
rotateY
rotateZ
7.CSS3 过渡
transition CSS 属性是一个简写属性，用于 transition-property
, transition-duration
, transition-timing-function
, 和 transition-delay
。
注意：在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。
transition-property CSS属性指定应用过渡属性的名称。
如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。
Values
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。
transition-duration CSS属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由 transition-property
指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
Value
<time>
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
这条加速度曲线被<timing-function>
所定义，之后作用到每个CSS属性的过渡.
你可以规定多个timing function,通过使用 transition-property
属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: inherit
transition-delay CSS属性规定了在过渡效果开始作用之前需要等待的时间。
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
Value
<time>
表明动画效果属性生效之前需要等待的时间。
8.CSS3 动画
CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
配置动画
创建动画序列，需要使用animation
属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes
规则实现，具体情况参见使用keyframes定义动画序列小节部分。
Values
animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-duration
设置动画一个周期的时长。
animation-iteration-count
设置动画重复次数， 可以指定infinite无限次重复动画
animation-name
指定由@keyframes
描述的关键帧名称。
animation-play-state
允许暂停和恢复动画。
**animation-timing-function
**
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-fill-mode
指定动画执行前后如何为目标元素应用样式。
使用keyframes定义动画序列
一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes
建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。
也可包含额外可选的关键帧，描述动画开始和结束之间的状态。
示例
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
animation-duration
属性指定 元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外， 是块级元素 <p> 上的动画从开始到结束耗费3秒，@keyframes
指定使用名字为"slidein"的关键帧。
如果希望在不支持CSS动画的浏览器中使用自定义样式，应该将其写在这里;然而，在该例中，我们不需要除动画效果以外的任何自定义样式。
关键帧是用@keyframes
定义的。该例中，我们只使用了两个关键帧。第一个出现在0%(此例中使用了别名from
)处，此处元素的左边距为100%(即位于容器的右边界)，宽为300%(即容器宽度的3倍)，使得在动画的第一帧中标题位于浏览器窗口右边界之外。
第二帧出现在100%(此例中使用了别名to
)。元素的左边距设为0%，宽设为100%，使得动画结束时元素与窗口左边界对齐。
增加关键帧
让我们给上面的示例中添加一个关键帧，比如标题的字号先变大然后恢复正常，添加这个关键帧十分简单：
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
重复动画
animation-iteration-count
用以指定动画重复的次数，仅仅使用该属性就能使动画重复播放。在该例中，设该属性为infinite
以使动画无限重复
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
来回运动
上面实现了动画的重复播放，但是每次动画开始时总跳回开始位置显得很怪异。我们真正想要的是标题来回滑动，这时只需要设置animation-direction
属性为alternate。
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
9.CSS3 多列
column-count CSS属性，用来描述该元素应该被划分的列数.
Values
auto
用来表示列的数量由其他CSS属性指定, 例如 column-width
.
<number>
是个严格的正数 <integer>
，用来描述元素内容被划分的理想列数. 假如 column-width
也被设置为非零值, 此参数仅表示所允许的最大列数.
column-gap CSS属性，用来设置元素列之间的间隔大小，此元素应是被指定为多列显示的元素。
Values
normal
用来表示使用浏览器定义的列的默认间隔。推荐默认间隔是1em，由现代大多数浏览器所遵循。
<length>
是一个 <length>值，定义列的间隔大小。必须是非负数，但可以等于０。
In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width
,column-rule-style
and column-rule-color
.
Values
Accepts one, two or three values in any order:
<'column-rule-width'>
Is a <length> or one of the three keywords, thin, medium or thick. See border-width
for details.
<'column-rule-style'>
See border-style
for possible values and details.
<'column-rule-color'>
Is a <color> value.
10.CSS3 用户界面
resize CSS属性允许你控制一个元素的可调整大小性。一般要配合 overflow属性使用。
Values
none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
box-sizing CSS属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
Values
content-box
默认值，标准盒子模型。 width
与 height
只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width 和 height
属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.
Values
<length>
The width of the space. See <length> for possible units. Negative values place the outline inside the element.
