CSS3教程和css3新特性专题.doc

CSS3教程和css3新特性专题CSS3教程和css3新特性专题介绍CSS3知识，提供CSS3教程，让你充分了解CSS3新特性、CSS3与网页制作知识。 CSS3教程CSS3教程(1):什么是CSS3CSS3不是新事物，更不是只是围绕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.6Safari(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-right-radius: 15px; padding: 15x 25px; height: inherit; width: 590px;浏览器支持:Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8)Opera 9.6Safari(3.2.1+ windows)CSS3教程(3):border-color网页边框色彩现在我们来看一看如何为边框的border-color添加更多的色彩。上一篇介绍了：CSS3教程(2):网页边框半径和网页圆角使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。浏览器兼容性目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。所有本系列关于CSS3的文章都会及时更新，以跟踪浏览器的兼容性。CSS3中的边框颜色这里是一个10px宽的标准边框和边框颜色：#borderColor border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px;浏览器支持：FireFox (3.0.5)Google Chrome (1.0.154+)Google Chrome (2.0.156+)Internet Explorer (IE7/IE8 RC1)Opera (9.6)Safari (3.2.1, Windows)有圆角的边框颜色#borderColorCorner border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px;浏览器支持：FireFox (3.0.5)Google Chrome (1.0.154+)Google Chrome (2.0.156+)Internet Explorer (IE7/IE8 RC1)Opera (9.6)Safari (3.2.1, Windows)CSS3教程(4):网页边框和网页文字阴影阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。上一篇介绍了：CSS3教程(3):border-color网页边框色彩一般可以分为box-shadow和textshadow两类。CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;Apx = x轴Bpx = y轴Cpx = 投影长度#XXX = 像通常一样的颜色了解了这些，我们就可以以下面的方法开始体验了浏览器兼容性：在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。#boxShadow border: 5px solid #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-bottom-right-radius: 15px; padding: 15px 25px; height: inherit; width: 590px;这种效果同样可以用于图片浏览器支持：FireFox (3.0.5) - FireFox (3.1 PreAlpha) 兼容Google Chrome (1.0.154.)Google Chrome (2.0.156.)(支持不是太好)Internet Explorer (IE7/ IE8 RC1)Opera (9.6)Safari (3.2.1, Windows)简单文字阴影：.textShadowSingle font-size: 3.2em; color: #F5F5F5; text-shadow: 3px 3px 7px #111; text-align: center;浏览器支持：FireFox (3.0.5) - FireFox (3.1 PreAlpha) 兼容Google Chrome (1.0.154.)Google Chrome (2.0.156.)(支持不是太好)Internet Explorer (IE7/ IE8 RC1)Opera (9.6)Safari (3.2.1, Windows)多重文字阴影.textShadowMultiple font-size: 3.2em; color: #FFF; text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0; text-align: center; padding: 10px 0px 5px 0px; background: #151515;浏览器支持FireFox (3.0.5) - FireFox (3.1 PreAlpha) 兼容Google Chrome (1.0.154.)Google Chrome (2.0.156.)(支持不是太好)Internet Explorer (IE7/ IE8 RC1)Opera (9.6)Safari (3.2.1, Windows)CSS3教程(5):网页背景图片背景图片/纹理有很多种使用方式，常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果。上一篇文章：CSS3教程(4):网页边框和网页文字阴影CSS3的背景图片大小可以写成 background-size:Apx Bpx;-Apx = x轴(图片宽度)-Bpx = y轴(图片高度)了解了这些，我们开始体验这个特性吧：最好支持CSS3背景大小的浏览器是Safari和Opera，所以我们只需要使用-o和-webkit前缀。背景大小#backgroundSize border: 5px solid #bd9ec4; background:url(image_1.extention) bottom right no-repeat; -o-background-size: 150px 250px; -webkit-background-size: 150px 250px; padding: 15px 25px; height: inherit; width: 590px;浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)为了在CSS3中应用多背景图片，我们使用都好隔开，例如：background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;我们可以在一行代码中尝试放置多个不同的图片多背景图#backgroundMultiple border: 5px solid #9e9aab; background:url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; padding: 15px 25px; height: inherit; width: 590px;浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS3教程(6):创建网站多列使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。上一篇文章：CSS3教程(5):网页背景图片与多背景图片一样，CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法，请在下面的评论中提交你的链接，我很高兴能确认这种方法能用于很多中布局中。跨浏览器兼容性：比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome，这样我们就需要使用-moz和-webkit前缀了。CSS3多列(宽度)上面的截图是使用了下面的CSS3样式的效果：#multiColumnWidth text-align: justify; -moz-column-width: 20em; -moz-column-gap: 2em; -webkit-column-width: 20em; -webkit-column-gap: 2em;浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS3多列(列数)上面的截图是使用了下面的CSS3样式的效果：#multiColumnCount text-align: justify; -moz-column-count: 3; -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #dedede; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #dedede;浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS3教程(7):CSS3嵌入字体想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！上一篇：CSS3教程(6):创建网站多列要使用一款字体，我们首先需要使用font-face属性。这必须先准备好我们要用的字体文件。尽管这样，让我们简单的学习一下字体方面的历史。font-face属性从CSS2就已经考虑了，但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。如果你手上没有字体文件，你可以在下载一些。跨浏览器兼容性目前只有Safari支持font-face特性(Google Chrome开发版 2.0.156+也支持这个特性)。注意，你的浏览器需要一些时间加载字体文件，所以，就目前来说，使用图片文件而不是CSS样式的用户体验会更好些。CSS3嵌入字体上面的效果可由下面的样式实现：font-face font-family: qianduanNet; src: url(SketchRockwell.ttf);.fontFace font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center;我们也可以对使用font-face的地方使用阴影效果。.fontFaceShadow font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; text-shadow: 3px 3px 7px #111;浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )(IE7+支持eot格式的字体文件)Opera(9.6+)(支持文字阴影)Safari(3.2.1+ windows)CSS3教程(8):CSS3透明度指南CSS3透明不透明渐变随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。其实这个firefox很久以前就支持了，而IE一直不支持！上一篇文章：CSS3教程(7):CSS3嵌入字体“opacity”声明用来设置一个元素的透明度：层、文字、图片等一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。浏览器兼容性opacity是浏览器支持最好的一个CSS3元素当然，除了IE！CSS3透明(例1：层)上面的透明例子使用了下面的样式：div.opacityL1 background:#036; opacity:0.2; width:575px; height:20px; div.opacityL2 background:#036; opacity:0.4; width:575px; height:20px; div.opacityL3 background:#036; opacity:0.6; width:575px; height:20px; div.opacityL4 background:#036; opacity:0.8; width:575px; height:20px; div.opacityL5 background:#036; opacity:1.0; width:575px; height:20px; 浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS 3 透明(例2：图片)我们也可以在图片上使用不同透明度的透明效果，就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上，实现一种链接的鼠标经过效果。img.opacity1 opacity:0.25; width:150px; height:100px; img.opacity2 opacity:0.50; width:150px; height:100px; img.opacity3 opacity:0.75; width:150px; height:100px; 浏览器支持：Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS3教程(9):设置RGB颜色使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。上一篇文章：CSS3教程(8):CSS3透明度指南RGBA像RGB一样设置颜色，而这个”A”RGBA中的最后一个值允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。浏览器兼容性RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。CSS3 RGBA 色彩上面的效果有以下样式实现：div.rgbaL1 background:rgba(153, 134, 117, 0.2); height:20px; div.rgbaL2 background:rgba(153, 134, 117, 0.4); height:20px; div.rgbaL3 background:rgba(153, 134, 117, 0.6); height:20px; div.rgbaL4 background:rgba(153, 134, 117, 0.8); height:20px; div.rgbaL5 background:rgba(153, 134, 117, 1.0); height:20px; 浏览器支持Firefox(3.05+)Google Chrome(1.0.154+)Google Chrome(2.0.156+)Internet Explorer(IE7, IE8 RC1 )Opera(9.6+)Safari(3.2.1+ windows)CSS3教程(10):CSS3 HSL声明设置颜色使用CSS3 HSL声明同样是用来设置颜色的。下一个呢？ HSLA？ 是的，这个和RGBA的效果是一样的。上一篇文章：CSS3教程(9):设置RGB颜色HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。Hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。Saturation值是一个百分比：0%是灰度，100%饱和度最高Lightnes