浅析CSS3的新功能和新特性

　　HSLA颜色值

　　HSLA与HSL的关系跟RGBA与RGB的关系一样，即这里允许出现第四个参数，以表示其透明度(通过Alpha通道)。

　　在截稿时，只有Safari 3和Firefox 3 Beta支持HSLA颜色值。

　　Opacity

　　Opacity是目前为止最广泛实现的CSS3特性。这大概也是我们最期待的特性。

　　RGBA颜色值

　　CSS3已经添加了一个颜色赋值的新特性。即RGB之后你现在也可以使用RGBA。这个"A"指的就是你猜测的alpha(透明度)。这个新特性允许我们定义颜色的透明度。它让网页工程师的日子变得轻松许多。

　　如今，这个特性已经在Safari 3和Firefox 3 pre-alpha中得以实现。

　　Text-shadow：用CSS实现类似Photoshop的特效

　　当我们需要实现一个简单的阴影的时候，CSS3最终消除了我们对Photoshop的需求。text-shadow属性可以被如下方式使用：

　　各个参数和box-shadow的参数表意一致。

　　目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已经实现这一特性。

　　注：这个特性并不是CSS3的新特性，而是CSS2提出的。Safari从第1个版本就有这个特性了。

　　Text-overflow

　　有的时候文本不得不被切割。比如当其溢出元素的矩形区域的时候。一旦这样的现象出现，你就需要一个视觉上的暗示，告诉用户文本被截断了。这时我们引入了text-overflow-props。最普遍的方式就是通过省略号来表示文本溢出，如规则中所说，“当前的字符表现可能有所不同”。Opera通过-o-text-overflow支持了这一特性。

　　支持这些特性现在变得很棘手。Webkit只支持text-overflow的简写方式，且这些特性只是部分实现。text-overflow: ellipsis-word; 和 text-overflow: inherit; 并没有工作。搞笑的是Internet Explorer从IE6开始支持了这一特性。具体参照：

　　text-overflow: ellipsis;

　　text-overflow: clip;

　　text-overflow: ellipsis-word;

　　Word-wrap

　　Word-wrap属性已经被微软发明并加入了CSS3中。它允许长单词在必要的情况下被截断换行。

　　word-wrap: normal;

　　word-wrap: break-word

　　这个特性已经在IE、Safari、Firefox 3.1 (Alpha)中得以实现。

　　Box-sizing：盒模型为简单应用做了扩展

　　一直不完全理解盒模型?CSS3提供了一个叫做box-sizing的新的属性，这个属性让我们改变浏览器在计算元素宽度方面的特性。默认情况下，box-sizing的值是content-box。在这种情况下，计算宽高时会遵照CSS2.1的相关规则，再加入边框和内边距的宽高。如果把值设置为border-box，则你可以强制浏览器不按照规范中的宽高进行渲染，而是把边框和内边距直接算在盒模型内。

　　Firefox已经实现了这一特性，属性名为-moz-box-sizing。Safari使用-webkit-box-sizing属性名，Opera直接使用box-sizing属性名。

　　CSS3中的resize属性

　　总是希望元素可以由我们随意调整大小?使用过很多乱七八糟的技巧?CSS3在用户界面这部分提供了解决方案：resize属性。它允许你定义盒模型是否可以调整大小。Webkit最新的深夜版本实现这一特性。

　　其中resize: both表示其宽度和高度都可以调整。同时还有resize: horizontal;和 resize: vertical;允许只调整宽度或只调整高度。还可以搭配max-width/min-width/max-height/min-height等属性限制其调整的范围。

　　Outline

　　Outlines已经在CSS3中得到了扩展，它包含了outline-offset属性。这个属性允许设置渲染轮廓线时向外位移的量。比如：

　　outline: 2px solid blue;

　　outline-offset: 12px;

　　这一特性目前已经在Opera、Safari、Firefox下得以实现。

　　CSS3结点属性(Attribute)选择器

　　在W3C 2005年12月的草案中描述：

　　引用:

　　6.3.2 属性选择器的部分值匹配

　　我们提供了三个属性选择器用以部分匹配其属性值

　　[att^=val]代表att属性值包含“val”前缀的元素

　　[att$=val]代表att属性值包含“val”后缀的元素

　　[att*=val]代表att属性值包含“val”的元素

　　属性值必须是标示符或字符串。属性名在选择其中是否大小写敏感取决于文档语言。

　　Media Queries

　　CSS2增加了media="screen"的支持，通过这种方式我们定义了显示数据用的样式表。CSS3增加了一个这方面的新的特性，即media queries。

　　基本上，这意味着你可以基于不同的宽高的视图区域改变样式表。在更广泛的领域中，这代表着规范中提到的：“通过使用Media Queries，其表现可以针对不同规格的输出设备表现出不同的内容。”

　　下面是有关min-width和max-width的两个测试，当前只在Safari 3、Opera和Firefox 3.1 (Alpha)中可用。无论如何这是未来的Web开发，它使得我们可以很轻松的同时在移动或传统设备中生成各自的页面。

　　Multi-column layout

　　W3C提供了把文本按照报纸一样按列排版的方式。Multi-column layout自成一个模块。它允许Web开发者通过两种方式把文字填到栏目中：定义每列的宽度或定义列数。第一种方式可以由column-width属性完成，第二种方式则由column-count完成。为了在栏目之间创建空白，你需要定义另一个属性column-gap的宽度。

　　Multi-column layout当前只有基于Mozilla的浏览器以及Safari 3支持，他们通过各自的前缀-moz-和-webkit-加以实现。下面的代码用到了column-width：

　　-moz-column-width: 13em;

　　-moz-column-gap: 1em;

　　-webkit-column-width: 13em;

　　-webkit-column-gap: 1em;

　　还有一个例子是用到了column-count：

　　-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-destribution，曾经用以描述如何划分列间距。

　　通过@font-face定义Web字体

　　说@font-face是CSS3的新特性并不准确，CSS2就已经第一次支持了这一特性，并且Internet Explorer早在第5个版本的时候就已经支持它了。尽管如此，他们的实现方式是通过专有的eot(Embeded Open Type)字体格式，没有别的浏览器决定使用这个格式。随着Safari 3.1的发布，网站的发布者可以在网页中使用任意持有证书的ttf(TrueType)字体文件或orf(OpenType)字体文件。

　　为了使用Web字体，每个字体表格必须使用@font-face规则。

　　@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

　　@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

　　CSS3 Speech

　　CSS2添加了听觉媒体类型的支持。这项支持用来定义在听觉设备中合成语音的“样式”。本规则添加了几个这种新媒体类型的属性。

　　目前的CSS2.1草案提出了media="speech"的特性，但是没有明确定义可以应用的属性。所以听觉媒体类型没有被认可。

　　CSS3的Speech模块移除了一些老的属性，添加了新的属性。这些都分配在speech媒体类型中。

　　Opera是实现最多CSS3 Speech属性的最流行的浏览器。

　　#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }

　　#voice-balance { -xv-voice-balance: left; }

　　#speech-cue { cue-after: url(ding.wav); }

　　#voice-rate { -xv-voice-rate: x-slow; }