5个实例让你轻松了解CSS3新属性

关注+2010-02-11作者：

5个实例让你轻松了解CSS3新属性：

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

XHMTL代码如下：

<!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>
分享：