【图】CSS3中的5个有趣的新技术

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

相关文章：介绍CSS3使用技巧5个

1：基本标记

css3-教程

在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。

我们的xHTML需要一下div元素:

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）#round, 使用CSS3代码实现圆角. #indie, 应用个别的几个圆角. #opacity, 展示新的CSS3实现不透明度的方式. #shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果. #resize, 展示如何使用某种CSS来实现重设大小的效果.

综上所述，我们的xHTML应该是这样的:

!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″ /
titleAn 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文件:

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}

正如你上面看到的，我们给每个div元素300px的宽和高，并让它们向左浮动，整个页面的div都留给我们在后面的工作中添加样式。看到本信息，说明该文章