IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4

 

7  多列布局属性

通过CSS3，开发人员能够创建多列来对文本进行布局。在CSS2时代，对于多列布局的设计，大多采用浮动布局和绝对定位布局两种方式。浮动布局比较灵活，但是需要编写大量的附加样式代码，而且在网页缩放等操作下容易发生错位，影响网页整体效果。绝对定位方式要精确到标签的位置，但固定标签位置的方式无法满足标签的自适应能力，也影响文档流的联动。CSS3新增了columns属性，即多列自动布局功能，利用该功能可以自动将内容按指定的列数排列（例如，columns: 250px 3，250px表示的是列宽，3表示的是多列的数目）。可以结合column-gap属性定义列之间的间距，结合column-rule属性定义每列之间边框的宽度、样式和颜色。应用示例代码如下所示：

CSS3多列布局还有很多新属性和特性，如栏目高度（column-fill）属性及分列打印等，这里就不再详述了。

 

8  渐变属性

对于正常的渐变背景，一般都是切丝然后平铺，至于是横向平铺还是纵向平铺要视实际情况而定，复杂一些的背景就只能切块图。然而CSS3可以让Firefox、Safari、Chrome实现颜色渐变，IE可以用滤镜，这也是一种值得考虑的方法。先看语法：

属性“-moz-linear-gradient”有3个参数。第一个参数表示线性渐变的方向，top表示从上到下，left表示从左到右，如果定义成left top，那就表示从左上角到右下角。第二个和第三个参数分别表示起点颜色和终点颜色。还可以在它们之间插入更多的参数，表示多种颜色的渐变。

属性“-webkit-gradient”是WebKit引擎对渐变的实现，共有5个参数。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。第二个和第三个参数都是一对值，分别表示渐变起点和渐变终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。第四个和第五个参数分别是两个color-stop函数。color-stop函数接受两个参数，第一个参数表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个参数表示该点的颜色。

IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点的颜色。GradientType表示渐变类型，0为默认值，表示垂直渐变；1表示水平渐变。