深入了解 CSS3 新特性（3）

look_w

CSS3 的多列布局（multi-column layout）CSS3 现在已经可以做简单的布局处理了，这个 CSS3 新特性又一次的减少了我们的 JavaScript 代码量，参考如下代码：
清单 9. CSS3 多列布局

1 2 3 4 5 6 7 8 9 10

.multi_column_style{ -webkit-column-count: 3; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; } <div class="multi_column_style"> ................. ................. </div>

这里我们还是以 webkit 内核浏览器为例：
Column-count：表示布局几列。
Column-rule：表示列与列之间的间隔条的样式
Column-gap：表示列于列之间的间隔
清单 9 的代码效果图如图 5：
图 5. 多列布局效果图边框和颜色（color, border）关于颜色，CSS3 已经提供透明度的支持了：
清单 10. 颜色的透明度

1 2	color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);

这里的“rgba”属性中的“a”代表透明度，也就是这里的“0.75”，同时 CSS3 还支持 HSL 颜色声明方式及其透明度：
清单 11. HSL 的透明度

1	color: hsla( 112, 72%, 33%, 0.68);

对于 border，CSS3 提供了圆角的支持：
清单 12. 圆角案例

1	border-radius: 15px;

参见下面圆角效果：
Figure xxx. Requires a heading