本文在发表时,Firefox 3.1还没有问世,现在其版本已经更新到了3.5,Opera也已经更新到9.6。当时还没有Google的浏览器Chrome，而现在Chrome已经升级到了2.0版本。不过Chrome和Safari都属于webkit系浏览器，因此在CSS 3的支持上差异不大。Internet Explorer也已经更新到了8.0，但是可惜的是它仍然不支持border-radius属性。
如果你关注CSS，那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。
是的，CSS 3样式文档至今还没有最终完成。如果你已经急不可待了，那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。
在CSS 3的支持上，Opera和Safari走在了前列，不过Firefox 3开始支持一些新的CSS 3特性了，而在Firefox 3.1则承诺对于CSS 3的支持至少会有和其他浏览器差不多。
呵呵，我知道你一定会说：“这样还远远不够，我必须让我的网站支持Internet Explorer才行”。
当然，你是对的。Internet Explorer用户的确没有那么幸运。尽管如此，这并不妨碍你在Firefox/Opera/Safari用户中使用CSS 3的圆角技术，只不过IE中无法理解圆角而显示的是背景而已。
我们必须承认，这些CSS规则要经过一两年的时间才能成为主流，但这并不意味着你现在不可以了解它们。
想成为网页设计中的顶尖高手吗？全副武装随我一起深入超酷的新规则腹地。
本文只是一篇维基文章。如果你了解CSS 3.0中的其他特性并乐意分享的话，请登录并补充。
圆角
Web 2.0的第一准则：是否具有圆角，这个很摩登。
不管你是如何设计圆角矩形的，至少现在的新特性border-radius可以让你不必去排列那些图片或者使用JavaScript来实现web 2.0效果。
假如有下面一行HTML代码：
<p class="r-box">Try doing this without images</p>
可以使用下面的样式规则来实现元素的圆角外形：
.r-box {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
下面是Firefox和Safari（包括Chrome）中的在线演示效果：
Try doing this without images
如果你使用的是其他浏览器，下面是在Safari中的演示截图：
那么上面我都做了些什么工作呢？首先前五行是一般的CSS 2中的声明，它们定义了元素的基本样式。最后两行才是我们真正关心的，它就是CSS 3中的样式声明border-radius。由于这个规则还没有最终公布，各浏览器厂商通过在其前面加上不同的前缘来实现其效果，Firefox中使用的是-moz-，Safari（和Chrome）中使用的是-webkit-（Safari和Chrome都是基于webkit的浏览器）。
这条规则的工作原理如下（opLeft, TopRight等分别代表的是相应的像素值）：
border-radius: TopLeft TopRight BottomRight BottomLeft; border-radius: TopLeft BottomLeft+TopRight BottomRight; border-radius: TopLeft+BottomRight TopRight+BottomLeft; border-radius: ALL;
上面的例子中我们使用的最底下的规则，如果你只想让两个角显示为圆角，就可以这么写：
-webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topright: 10px;
注意，上面的写法中，W3C更倾向采用Firefox的写法。由于border-radius还没有最终实现，Opera决定在Opera 9.5中放弃对其支持。
在使用了CCS 3中的border-radius后同样想在IE中使用图片来实现这样的效果，那么你可以查看这里。它的好处在于现代浏览器中并不会由于有很多圆角图片而降低速度。
边框
在CCS 3中边框也有了不同凡响的新功能，比如可以支持层次化等。在Firefox中运行下面的代码：
#box {
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}
你将会看到如下效果：
如果你没有使用Firefox 3，下面是演示截图：
本文在写作的时候，Safari和Opera还都不支持上面的语法。
阴影
尽管这已经不是一项新技术，但是现在给文字添加阴影已经十分方便了。早在CSS 2.1中就已经这个规则了，而Safari从它的1.0版本开始就已经开始支持了。可以简单地使用text-shadow属性：
<p style="text-shadow: 2px 2px 2px #000;">My Text</p>
前两个数值，向下2px和向右2px用来控制边距，最后一个数值用来控制阴影的扩展程度。如果你想使阴影出现在文字的上方，只需要把对应的数值设置成负数。下面是一个示例：
If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.
Safari中的截图：
在一些浏览器（特别是在Opera和Firefox 3.1a）中甚至还可以支持多重阴影，这就意味着你可以只用CSS制作与Photoshop中别无二致的复杂效果来。
图片特效
这个功能可以让你的设计跃然纸上。不过，目前为止只有WebKit系浏览器支持遮罩效果，但是Firefox和Opera很快也会支持了。这项功能主要是为图片、视频以及其它元素添加透明的遮罩效果。
在Safari中其规则如下：
-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
你可以在 David Hyatt’s (Safari的开发者)的文章中查看更炫的遮罩效果。
其它
随着浏览器对CSS支持的扩大更多更新的显示效果会相继出现。实际上，本文仅仅掀开了CSS 3的神秘面纱。CSS 3中还支持多个背景图片、HSL色彩、盒模型缩放、单元素的多栏布局等等。
除上述属性为，CCS 3还增加了更强大的新的选择器的把持，这就使得现在需要五六行才能的实现的效果在一行CCS 3代码就可以搞定。Roger Johansson在456 Berea St有一篇对CSS 3选择器的详细解释（本人已经将此文翻译成了中文：《详解CSS 3中的属性选择符》）。
