1.CSS3多列:column

column主要有三个属性。

column-count:定义列数。

column-gap:定义每一列之间的间隔。

column-rlue：定义每列之间的边线规则，分为style，color，width这3个分支属性，可像border一样简写。

如代码：

#test{
       width:600px;    background:#eee;    -webkit-column-count:3;    -webkit-column-gap:20px;    -webkit-column-rule:2px #00f outset;}

效果为：

 

2.文本换行，断开，省略

在word-wrap之前，遇到英文长单词事，我们经常使用word-break:break-all来控制文本换行。然而现在，可以使用word-wrap:break-word来控制。一般用于长单词或者url的换行。

如代码：

#test{
       width:200px;    background:#ccc;    word-wrap:break-word;}

效果为：

使溢出的文本省略可用text-overflow，text-overflow:ellipsis要和overflow:hidden结合使用，可使溢出的文本用省略号代替。

如代码：

#test{
       width:200px;    background:#ccc;    text-overflow:ellipsis;    overflow:hidden;}

效果为：

 

4.媒体查询：@media

媒体查询文档：http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2

 

5.网络字体：@font-face

有了@font-face，我们就可以在自己的网页上使用自己喜欢的字体，不必通过图片来完成了。我们可以在自己的服务器上托管自己的字体，然后通过相对路径来访问字体。@font-face有两个主要属性：

font-family:定义字体的名称。

src：字体文件的位置。

如代码（test.ttf是行楷）：

@font-face{
       font-family: web;    src:url(test.ttf);}#test{
       font-family:web;}

效果为：

需要说的是，任何版本的IE浏览器都不支持ttf字体，只支持eot字体。我们可以用CSS hack来解决这个问题。