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

作者佚名技术来源 CSS技术浏览发布时间 2012-02-26

css是大家众所周知的，广泛的用来定义网站样式。随着css3版本的发布，css3支持一些省时、省力的一些新属性。尽管目前仅仅最新的浏览器支持这些新属性，但还是感觉不错的。此文章我将介绍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>

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

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS3制作的精彩的网页实例教程下一篇: CSS教程:详解CSS特定值

关于5个实例让你轻松了解CSS3新属性的所有评论

随机推荐