css3

CSS: vertical-align 

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

CSS3 Borders

Property	Description	CSS
border-image	A shorthand property for setting all the border-image-* properties	3
border-radius	A shorthand property for setting all the four border-*-radius properties	3
box-shadow	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{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;
  }

CSS3 User Interface

• resize
• box-sizing
• outline-offset