1. 基本的xhtml标记
在开始这个教程之前，让我们来做点xHtml标记，我们需要的几个DIV来完成效果的显示，如下：
#round, 这个显示CSS 3圆角
#indie, 单个角的显示
#opacity, 不透明度
#shadow, 不用制图工具制作投影
#resize, 可调节大小
因此，我会的xHtml会像下面这样，你可以自己建立一个html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="round"> </div>
<div id="indie"> </div>
<div id="opacity"> </div>
<div id="shadow"> </div>
<div id="resize">
<img src="image.jpg" alt="resizable image" width="200" height="200">
</div>
</div>
</body>
</html>
让我们来稍微重设一下浏览器的CSS（还刻CSS reset吗? 可以看10款浏览器CSS Reset的方法），代码如下：
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
/*稍后我们把要实现的代码写在这里*/
2. CSS3 圆角
如上面所说，我们的代码会是这样的：
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
在这里-moz是firefox上能显示的样式前缀，而-webkit刚是像safari/Chrome这样的浏览器的样式前缀。而10px刚是border的半径（radius : [‘reidjəs] n. 半径），明白了吧！
3. 单独圆角的定义
看了上面的CSS圆角，你可能会觉得，如果我想让它只显示两个三个圆角，需要怎么办呢，难道还是要用到制图工具? 当然不用，CSS3已经为我们想好了。这里，我们的代码将是：
