CSS新特性:圆角边框多栏Gird布局背景设置

到现在为止,只有一些已经工作的CSS3特性.
多栏
该特性使生活更加容易，呵呵。这个新特性允许网页设计师将文字填入栏中。这可以通过两种方法实现，定义各栏的宽度，或者是定义栏数。
多栏布局目前只支持Mozilla核心的浏览器和Safari 3， 它们支持各自的属性前缀 -moz-和-webkit-。下面的例子使用栏宽：
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
下一个例子使用栏数：
-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-distribution”，这个属性可以描述当页面中还有剩余空间时如何分配栏目之间的间距。
关于CSS3 中的 Gird 布局
我们看看下面这张图：

图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说，如果使用 CSS3 Gird 布局的话，我们只需这样写：
body { columns:3; column-gap:0.5in; }
img { float：page top right; width:3gr; }
其中，body 部分声明页面为 3 栏，栏间距为 0.5英寸；img 中 float 属性指明图片浮动位置为页面的右上角（CSS3 定位好强大 -__-），而宽度为 3 个栏宽。只需这样两行 CSS，我们就可以实现这个复杂的布局了。真的很神奇。
Gird 布局是好，不过如果你认为它很简单的话，你就大错特错了。看看 w3c 中关于它的介绍，你会发现理解它的意义不亚于看懂天书。好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。
Gird 布局应用很广泛，最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它（以及其它 CSS3 草案），那就酷毙了。不知道，最近异常低调的 IE8，会不会是这第一个吃螃蟹的人呢？

最新评论