CSS: vertical-align

baseline : 基线   sub : 下标  super : 上标

CSS3 Borders

Property	Description	CSS
	A shorthand property for setting all the border-image-* properties	3
	A shorthand property for setting all the four border-*-radius properties	3
	Attaches one or more drop-shadows to the box	3

IE9支持border-radius， box-shadow.

Firefox, Chrome, and Safari支持所有的新border属性

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */

CSS3 Backgrounds

background-size：Internet Explorer 9+, Firefox, Chrome, Safari, and Opera设置背景图片的大小

background-origin: border-box，padding-box，content-box

CSS3 Gradients

Linear Gradients (goes down/up/left/right/diagonally)

Radial Gradients (defined by their center)

Internet Explorer 10+, Firefox 16+, Chrome 26+, and Opera 12.1+ support the four gradient functions.

Safari 5.1+ requires the prefix -webkit-.

Chrome 10 to 25 require the prefix -webkit-.

Opera 11.1 to 12.0 require the prefix -o-.

Firefox 3.6 to 15 require the prefix -moz-.

Internet Explorer 9 and earlier versions do not support gradients.

CSS3 Text Effects

text-shadow

word-wrap：一个单词过长允许截断到下一行显示，p {word-wrap:break-word;}

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the text-shadow property.

All major browsers support the word-wrap property.

CSS3 Fonts

CSS3 2D Transforms

translate()

rotate()

scale()

skew()

matrix()

CSS3 3D Transforms

rotateX()

rotateY()

CSS3 Transitions

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

Specify the CSS property you want to add an effect to

Specify the duration of the effect.

div{transition: width 2s;-webkit-transition: width 2s; /* Safari */}div:hover{width:300px;}

CSS3 Animations

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

div{

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

@keyframes myfirst{from {background:red;}to {background:yellow;}}

@-webkit-keyframes myfirst /* Safari and Chrome */{from {background:red;}to {background:yellow;}}

CSS3 Multiple Columns

column-count

column-gap

column-rule

.newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;-moz-column-rule:4px outset #ff00ff; /* Firefox */-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */column-rule:4px outset #ff00ff;}