51CTO下载-CSS3教程和css3新特性专题.docVIP

CSS3教程和css3新特性专题 CSS3教程和css3新特性专题介绍CSS3知识，提供CSS3教程，让你充分了解CSS3新特性、CSS3与网页制作知识。 CSS3教程 CSS3教程(1):什么是CSS3 CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了…… 注意：浏览器需要改进 尽管把玩CSS3是很有趣的事情——就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如果你要在你的网站中使用CSS3，请确认有针对不支持CSS3的浏览器的兼容方法。 CSS3的浏览器支持状况： Firefox(3.05+…部分支持) Google Chrome(1.0.154+…部分支持) Google Chrome(2.0.156+…较好支持) Internet Explorer(IE7, IE8 不支持) Opera(9.6+…很少支持) Safari(3.2.1+ windows…较好支持) 什么是CSS，什么是CSS3？ 非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。CSS3只是表示下一代CSS，3只是版本号。 如果CSS3还没有完全被支持，那么我为什么要写CSS3呢？ 因为学习新东西时间很有趣的事情！ 而且有人常常问我如何实现圆角。我解释了很多遍如何使用图片或CSS3实现，这里我通过写一些我学到的一些东西的方式来希望能够帮助其他的有需要的人。 当然你也不必只看我说的。Eric Meyer是一个了解CSS很多的传奇人物，这里有个很棒的对Eric的访谈，讨论CSS3，很值得一读。 测试，我特别制作了一个关于本系列教程的测试页面。所有本系列教程所讨论的内容，在该测试页面都有演示，你也可以访问该页面，来测试一下自己的浏览器是否支持CSS3。 CSS3教程(2):网页边框半径和网页圆角 页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3教程:什么是CSS3》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。 前缀： -moz(例如 -moz-border-radius)用于Firefox-webkit(例如：-webkit-border-radius)用于Safari和Chrome。 CSS3圆角（所有的） 不使用图片来实现圆角曾经是很流行的能力，创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用几行代码来创建圆角。 这是一个5px普通边框和15px边框半径的设置： #roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 15px 25px; height: inherit; width: 590px; } 浏览器支持: Firefox(3.05+…) Google Chrome(1.0.154+…) Google Chrome(2.0.156+…) Internet Explorer(IE7, IE8) Opera 9.6 Safari(3.2.1+ windows) CSS3圆角(个别的) 当然，一个DIV的四个角不需要全部都是圆角，你可以个别的实现圆角。 #roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-rig