思洋互动网站建设学前班

2. RGBA和透明度

RGBA 让你可以不仅仅设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。Tim Van Damme在链接的hover效果上使用了RGBA，在这个网站上，Tim Van Damme在鼠标悬停效果上使用了RGBa；例如，在他的首页的network链接上:

1. #networks li a:hover,  
2. #networks li a:focus {  
3.     background: rgba(164, 173, 183, .15);  
4.     } 

当设定一个RGBA 色彩的时候，我们必须依次设定红、蓝、和绿色的值，可以是0-255或百分数。透明值应该在0.0到1.0之间，例如0.5 代表50% 的透明度。

RGBA 和opacity 之间的不同是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。这里有个例子展示我们如何给一个div添加80% 透明:

1. div {  
2.     opacity: 0.8;  
3.     } 

浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox2也不支持，但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜（filter）                                           广州网站建设,网站建设,广州网页设计,广州网站设计

3. 多栏布局

这是新的CSS3选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。tweetCC 在其首页使用了CSS3 多栏选择器，tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：

1. .index #content div {  
2.     -webkit-column-count : 4;  
3.     -webkit-column-gap : 20px;  
4.     -moz-column-count : 4;  
5.     -moz-column-gap : 20px;  
6.     } 

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

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

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

上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。相关属性: 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-originandbackground-clip等在一个元素上添加多层背景图片.

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

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

第一个图片将是离用户“最近”的那个。该属性的一个更复杂的版本可以是这样的：

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

在这里，(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. .widefat * {  
2.     word-wrap: break-word;  
3.     } 

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

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

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

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

BeakApp.com 为内容区域使用了text-shadow 属性，为文字添加深度和维度 并让它变得醒目——而不是使用某种图片替换技术。该属性目前只在Safari和Chrome中可用。该网站的主菜单使用的CSS如下：

1. .signup_area p {  
2.     text-shadow: rgba(0,0,0,.8) 0 1px 0;  
3. } 

这里我们使用阴影颜色(使用了RGBA，前面有描述)， 然后是右(x 坐标) 和底部(y 坐标) 偏移，最后是模糊半径。如果要在一个文字上使用多阴影，可以使用逗号分开。比如：

1. p {  
2.     text-shadow: red 4px 4px 2px,  
3.         yellow -4px -4px 2px,  
4.         green -4px 4px 2px;  
5.     } 

浏览器支持: Webkit核心浏览器和Opera 9.5 支持text-shadow。Internet Explorer 不支持它，Firefox 将在即将发行的3.5版本中支持。