多列布局有3个主要属性: column \column-gap\column-rule.
Column是column-count和column-width的简写属性。
column-count指定列数,column-width指定列宽。
如果同时指定了列数和列宽,则以较宽的一项为准。
Column-gap指定列间距,默认值为normal,即1em的间隙;
还可以用通过Column-rules指定列分隔线,此属性接受与 border 属性相同的值。
多列布局还能实现指定分列、跨列、平衡列内容等特性。
利用分栏还可以实现很多效果。
想直观的看到效果,你可以多看看相关的教程,比如说现在有个视频的系列名称叫做 《Buid New World》,里面有一集专门讲 CSS3 复杂布局形式
CSS3 新特性
包括
CSS3 选择器(Selector)
@Font-face 特性、
Word-wrap &Text-overflow 样式
Text-decoration
多列布局(multi-column layout)
边框和颜色,颜色支持透明度(color, border)
渐变效果(Gradient)
阴影(Shadow)和反射(Reflect)效果
盒子模型
Transitions, Transforms 和 Animation
比如:@Font-face 特性
@font-face {
font-family: BorderWeb
src:url(BORDERW0.eot)
}
@font-face {
font-family: Runic
src:url(RUNICMT0.eot)
}
.border { FONT-SIZE: 35pxCOLOR: blackFONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110pxCOLOR: blackFONT-FAMILY: "Runic" }
更多参考:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/