css3新特性总结（可读性方面）
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来解决这个问题。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
