老码农的一亩三分地

老码农的一亩三分地

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

7  多列布局属性

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

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

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

8  渐变属性

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

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

属性“-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表示水平渐变。

11-08 12:21