CSS 3入门

我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章，其中推荐了Get started with CSS 3，本文为其中文译本，转载请注明。

如果你关注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中使用图片来实现这样的效果，那么你可以查看这里。它的好处在于现代浏览器中并不会由于有很多圆角图片而降低速度。