css是大家众所周知的，广泛的用来定义网站样式。随着css3版本的发布，css3支持一些省时、省力的一些新属性。尽管目前仅仅最新的浏览器支持这些新属性，但还是感觉不错的。此文章我将介绍5个css3的新属性。
效果浏览
代码下载

一、基本代码结构
在开始这个教程之前，我们先把基本的代码结构编写好，我将结合这些代码来讲解介绍。
我们需要如下div代码元素
1、#round，讲解css3圆角效果时使用；
2、#indie，讲解个性圆角效果时使用；
3、#opacity，讲解css3实现透明的新方法；
4、#shadow，在不使用photoshop情况下，如何创建投影效果；
5、#resize，介绍一个新的css3属性，调整缩放元素。

XHMTL代码如下：

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
  5. <title>An Introduction to CSS3; A Nettuts Tutorial</title>
  6. <link href=“style.css” rel=“stylesheet” type=“text/css” />
  7. </head>
  8. <body>
  9. <div id=“wrapper”>
  10. <div id=“round”> </div>
  11. <div id=“indie”> </div>
  12. <div id=“opacity”> </div>
  13. <div id=“shadow”> </div>
  14. <div id=“resize”>
  15. <img src=“image.jpg” alt=“resizable image” width=“200″ height=“200″>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

在html文档里面，我们创建了几个div，同时给相应的div定义了ID。
我们创建基本的css样式。

  1. body    {
  2. background-color: #fff;
  3. }
  4.  
  5. #wrapper {
  6. width: 100%;
  7. height: 100%;
  8. }
  9.  
  10. div {
  11. width: 300px;
  12. height: 300px;
  13. margin: 10px;
  14. float: left;
  15. }
  16.  
  17. /*rest of the code will come here, later*/

正如你看到的，我们给每一个div标签设置了300px的宽和300px的高。同时给它们定义了float:left（左浮动）让它们显示在一排。

二、圆角
css1

创建圆角效果稍微有点麻烦。首先，你先设计这个圆角效果图片，然后，创建多个结构标签，把圆角图片分别定义在相应的结构里面。这个步骤你是了解的。

这个效果用css3的新属性“border-radius”来做就很简单了，我们先创建div标签并定义黑色背景和黑边。这个border是必须的，因为我们通过这个border边来让border-radius属性生效。

代码如下：

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. }

刷新页面，你就可以看到一个宽高为300px的黑色、正方形的div。现在，我们开始来实现这个圆角的效果。仅仅需要添加2行代码就可以了。

  1. #round {
  2. background-color: #000;
  3. border: 1px solid #000;
  4. -moz-border-radius: 10px;
  5. -webkit-border-radius: 10px;
  6.  
  7. }

正如你所看到的，我们添加了2行几乎相同的代码，唯一不同的地方就是”-moz”和”-webkit”。-moz主要是针对firefox浏览器的，-webkit则是Safari（苹果）/Google Chrome（谷歌）浏览器的。
刷新你的页面，在firefox（火狐）和Safari（苹果）浏览器里面是你可以看到平滑的圆角div，而在Chrome（谷歌）浏览器里面稍微会有点锯齿的边。

回到代码里面，修改border-radius的值，可以修复圆角有锯齿的情况。border-radius的值越大圆角越平滑，就像在photoshop里面的那样。据我所知，这个元素没有最大值。

三、个性圆角
css2
制作传统的圆角将花费你大量的时间，庆幸的是，css3可以轻而易举的解决它。