css3新特性总结（可读性方面）

2022-06-28 04:10:33

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来解决这个问题。

码农公寓