提升你设计水平的CSS3新技术（3）

猫性男孩 · 发表于 2013-4-19 10:02:33

3. 多栏布局

这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

tweetCC 在其首页使用了CSS3 多栏选择器

tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：

1
2
3
4
5
6

.index #content div {
-webkit-column-count : 4 ;
-webkit-column-gap : 20px ;
-moz-column-count : 4 ;
-moz-column-gap : 20px ;
}

我们可以通过这个选择器定义三件事情：栏数(column-coun)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。

为了在各栏时间添加一个数值的分隔，我们可以使用column-rule 属性，其功能和border 属性类似:

1
2
3

div {
column-rule : 1px solid #00000 ;
}

上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。

相关属性: column-break-after, column-break-before, column-span, column-fill.

浏览器支持: 多栏布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。

扩展阅读：

4. 多背景图

CSS3 允许你使用多个属性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片.

在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:

1
2
3
4
5

div {
background : url ( example.jpg ) top left no-repeat ,
url (example2.jpg ) bottom left no-repeat ,
url (example3.jpg ) center center repeat-y ;
}

第一个图片将是离用户“最近”的那个。

该属性的一个更复杂的版本可以是这样的：

1
2
3
4
5

div {
background : url ( example.jpg ) top left ( 100% 2em ) no-repeat ,
url (example2.jpg ) bottom left ( 100% 2em ) no-repeat ,
url (example3.jpg ) center center ( 10em 10em ) repeat-y ;
}

在这里，(100% 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。

因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。

浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效

扩展阅读：

5. Word Wrap

word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字，如连字符。如果使用了break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

WordPress 后台在数据表中使用了word-wrap.

在WordPress 的控制面板中，word-wrap 属性被用于表格中的元素；比如在日志和页面的列表中：

1
2
3

.widefat * {
word-wrap : break-word ;
}

浏览器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 将在3.5版本中支持它。

扩展阅读：

6. 文字阴影

尽管在CSS2中就已经存在，text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。

尽管这样，你需要确认，你的设计中的文字是可读的，以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。

Beakapp 在它的网站中使用了text-shadow 属性：内容区域.

		自动登录	找回密码
密码			立即注册

[分享] 提升你设计水平的CSS3新技术（3）

站长推荐 /1