css3新特性总结

1.边框
border-radius
box-shadow
border-image

2.背景
background-size
background-origin
background-clip

3.文本效果
hanging-punctuation
规定标点字符是否位于线框之外。

punctuation-trim
规定是否对标点字符进行修剪。

text-align-last
设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis
向元素的文本应用重点标记以及重点标记的前景色。

text-justify
规定当 text-align 设置为 "justify" 时所使用的对齐方法。

text-outline
规定文本的轮廓。

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

text-shadow
向文本添加阴影。

text-wrap
规定文本的换行规则。

word-break
规定非中日韩文本的换行规则。

word-wrap
允许对长的不可分割的单词进行分割并换行到下一行。

4.字体

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

5.2D 转换

• translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
• rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• scale()：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
  值scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
• skew()：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• matrix()：把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

6.3D转换
rotateX()
rotateY()

7.过渡

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

8.动画
http://www.w3school.com.cn/css3/css3_animation.asp

9.多列
column-count
column-gap
column-rule