目录
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后，阴影在边框内（即使是透明边框），背景之上内容之下。
这是头两个
这是第三个
这是第四个
相关事项查看
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
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).
Display the given string as marks. Authors should not specify more than one character in
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
可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。
Note: 如果想确保跨浏览器的一致性，请明确地指定一种颜色
必选。这些长度值指定阴影相对文字的偏移量。
指定水平偏移量，若是负值则阴影位于文字左边。
指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了
)。可用单位请查看
。
可选。这是
值。如果没有指定，则默认为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: ; ] ||
[ src: [ [ format(#) ]? | ]#; ] ||
[ unicode-range: #; ] ||
[ font-variant: ; ] ||
[ font-feature-settings: normal | #; ] ||
[ font-stretch: ; ] ||
[ font-weight: ; ] ||
[ font-style:
This is Bitstream Vera Serif Bold.