今天图老师小编给大家展示的是CSS3中的5个有趣的新技术，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！
【 tulaoshi.com - Web开发 】
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。网页教学网将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
相关文章：介绍CSS3使用技巧5个
1：基本标记
在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。
我们的xHTML需要一下div元素:
#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
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
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%;
}div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
正如你上面看到的，我们给每个div元素300px的宽和高，并让它们向左浮动，整个页面的div都留给我们在后面的工作中添加样式。看到本信息，说明该文章
来源:http://www.tulaoshi.com/n/20160219/1630466.html
看过《CSS3中的5个有趣的新技术》的人还看了以下文章 更多>>
