CSS教程:CSS3新功能和新特性

作者佚名技术来源 CSS技术浏览发布时间 2012-02-25

式则由column-count完成。为了在栏目之间创建空白，你需要定义另一个属性column-gap的宽度。
Multi-column layout当前只有基于Mozilla的浏览器以及Safari 3支持，他们通过各自的前缀-moz-和-webkit-加以实现。下面的代码用到了column-width：

Code:

-moz-column-width: 13em;
-moz-column-gap: 1em;

-webkit-column-width: 13em;
-webkit-column-gap: 1em;

还有一个例子是用到了column-count：

Code:

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;

-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

有一个已经不再被支持的特性是column-space-destribution，曾经用以描述如何划分列间距。

通过@font-face定义Web字体
说@font-face是CSS3的新特性并不准确，CSS2就已经第一次支持了这一特性，并且Internet Explorer早在第5个版本的时候就已经支持它了。尽管如此，他们的实现方式是通过专有的eot(Embeded Open Type)字体格式，没有别的浏览器决定使用这个格式。随着Safari 3.1的发布，网站的发布者可以在网页中使用任意持有证书的ttf(TrueType)字体文件或orf(OpenType)字体文件。
为了使用Web字体，每个字体表格必须使用@font-face规则。

Code:

@font-face { font-family: Delicious; src: url(''Delicious-Roman.otf''); }
@font-face { font-family: Delicious; font-weight: bold; src: url(''Delicious-Bold.otf''); }

然后调用该字体：

Code:

h3 { font-family: Delicious, sans-serif; }

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 8 9 10 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: YUICompressor:高效压缩CSS和JS代码的工具下一篇: 50个强大璀璨的CSS3/JS技术运用实例

关于CSS教程:CSS3新功能和新特性的所有评论

随机推荐