CSS3技术带你领略未来的网页设计
层叠样式表使得网页设计中的创造力出现爆发性的增长，它在不断除旧更新的过程中，总能提供一些令人兴奋的新特性。而这些特性中就包括即将到来的 CSS3 规范。实际上，你在几年内都还不能把它利用在你的客户项目中，但可以用在设计圈内的博客和网站上，这些特性能够帮助你拓展现代网页设计的领域，给你的设计添加一些额外的情趣，并给行业的发展推波助澜。
让我们窥探一下未来，以下五项技术已经可以应用在你的设计中了。
圆角边框也许是已经在使用的CSS3特性中最常见的。标准的HTML块元素是90度的方形边角。而CSS3风格规则就允许使用圆角。
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
圆角的半径也可以针对个别指定的边角设置，虽然 -moz- 和 -webkit- 的语法只有细微的不同：
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;
支持该特性的浏览器： Firefox、Safari 和 Chrome。
用例：Twitter。
另见：
边框图像，顾名思义，就是允许图像文件作为边框的一个对象。图像首先是建立在相类似的两个HTML对象间。然后执行下面的语法：
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
{border: 5px} 属性指定边框的总宽度，然后每一个 border-image 规则指定图像文件，并告诉浏览器图像的多少来填补这 5px 的边框区域。
边框图像还可以针对每个边独立设置，允许不同的图像用于不同的四个边和四个角。
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
支持该特性的浏览器： Firefox 3.1、Safari 和 Chrome。
用例：Blog.SpoonGraphics。
另见：
下拉阴影：难道你不喜欢它们吗？！它可以轻而易举地左右一个设计的成败。现在，使用CSS3，你甚至可以把 Photoshop 扔在一边！我们迄今所看到的真正使用在设计中的，最好的例子就是 24 Ways。
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
头两个属性决定阴影对相关元素的补偿值，在这里，横向和纵向都是10px。第三个属性设置了阴影的模糊强度。最后，是设置阴影的颜色。
此外，text-shadow 属性可以用于文本的内容：
text-shadow: 2px 2px 5px #ccc;
支持该特性的浏览器： Firefox 3.1、Safari、Chrome（仅 box-shadow）和 Opera（仅 text-shadow）。
用例：24 Ways。
另见：
在网页设计中，PNG文件的利用使得透明成为了一个关键的设计特点。现在，仅用一个 alpha 值或不透明规则就可以直接在CSS中实现透明效果。
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);
前三个数字指的是红、绿、蓝三种颜色通道，最后一个值指 alpha 通道，正是利用它来制作透明效果。
还有一种方法，就是利用不透明度规则，同样可以设置颜色，不透明度是一个单独的规则：
color: #000;
opacity: 0.5;
支持该特性的浏览器： Firefox 、Safari、Chrome、Opera（不透明度）和 IE7（经修复支持不透明度）。
用例：24 Ways （RGBA）。
另见：
一直以来，都有一套可靠的字体可以使用在网页上，如：Arial、Helvetica、Verdana、Georgia、Comic Sans（待考证...）等等。现在 @font-face CSS3规则允许从在线目录中调用字体，并且以一个全新的面貌显示在网页上。由于版权问题，只有不多的特定的字体可用于 @font-face 的嵌入。
执行代码如下：
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
其它字体，包括备用属性，仍然像往常那样使用：
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;
支持该特性的浏览器： Firefox 3.1 、Safari、Opera 10 和 IE7（需要大量的修正工作：如果你够胆的话，可以尝试让 IE 支持这个特性（多谢 Jon Tan 的提醒））。
用例：TapTapTap。
另见：
虽然 CSS3 仍然在完善中，但以上特性已经得到了一些浏览器的支持。尤其 Safari 支持的特性最多。可惜，这样一个高品质的浏览器却只有相对较少的用户，所以不大值得为一部分用户添加额外的特性。但是随着苹果的 Mac 电脑融入日常生活，Safari 的用户可能会持续增加。
另一方面，Firefox 目前拥有庞大的用户群。更重要的是，不久后就将发布的 Firefox 3.1 新增支持了不少 CSS3 的特性。假设大多数 Firefox 的用户都会安装最新版本，那么到时就会有一个巨大的用户群都能享受到这些新特性。
Google Chrome 今年才推出。它基于 WebKit 引擎，所以与 Safari 相似。Safari 在 Mac 用户中有很高的使用比例，而 Chrome 则在 Windows 平台上崭露头角。
根据 W3 的浏览器统计，截止2008年11月，有 44.2% 的用户使用 Firefox，Chrome 3.1% 而 Safari 为 2.7%（这数据实在不符合中国国情啊 - 译注）。这意味着近 50% 的网络用户都能看到这些特性。如果是在设计圈里，就更注重浏览器的选择了，支持 CSS3 的比例更高，达到 73.6%（根据 Blog.SpoonGraphics的数据）。
你的网站现在就可以用上这些特性了，但请注意使用它们还有些弊端：
原文标题：Push Your Web Design Into The Future With CSS3
原文地址：h
作者： Chris Spooner
译文：