(靠谱)CSS3 教程.doc

(靠谱)CSS3_教程CSS3教程CSS3CSS用于控制网页的样式和布局。CSS3是最新的CSS标准。现在就开始学****CSS3!CSS3实例div{transform:rotate(30deg);}亲自试一试点击“亲自试一试”按钮,看看它是如何运行的。CSS3参考手册在W3School中,我们提供完整的CSS3参考手册,包括所有属性和选择器的语法、实例、浏览器支持信息。注:本参考手册即将上线。CSS3属性参考手册CSS3浏览器支持参考手册CSS3选择器参考手册CSS颜色参考手册一、CSS3简介CSS3完全向后兼容,因此您不必改变现有的设计。浏览器通常支持CSS2。CSS3模块CSS3被划分为模块。其中最重要的CSS3模块包括:选择器框模型背景和边框文本效果2D/3D转换动画多列布局用户界面CSS3标准W3C仍然在对CSS3规范进行开发。不过,现代浏览器已经实现了相当多的CSS3属性。二、CSS3边框CSS3边框通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop。在本章中,您将学到以下边框属性:border-radiusbox-shadowborder-image浏览器支持属性浏览器支持border-radiusbox-shadowborder-Explorer9支持border-radius和box-shadow。Firefox支持所有新的边框属性。Chrome和Safari支持border-radius和box-shadow,但是对border-image的支持需要前缀-webkit-。Opera支持border-radius和box-shadow,但是对border-image的支持需要前缀-o-。CSS3圆角边框在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在CSS3中,创建圆角是非常容易的。在CSS3中,border-radius属性用于创建圆角:这个矩形有圆角哦!实例向div元素添加圆角:div{border:2pxsolid;border-radius:25px;-moz-border-radius:25px;/*OldFirefox*/}亲自试一试CSS3边框阴影在CSS3中,box-shadow用于向方框添加阴影:实例向div元素添加方框阴影:div{box-shadow:10px10px5px#888888;}亲自试一试CSS3边框图片通过CSS3的border-image属性,您可以使用图片来创建边框:border-image属性允许您规定用于边框的图片!用于创建上面的边框的原始图片:实例使用图片创建围绕div元素的边框:div{border-image:url()3030round;-moz-border-image:url()3030round;/*老的Firefox*/-webkit-border-image:url()3030round;/*Safari和Chrome*/-o-border-image:url()3030round;/*Opera*/}亲自试一试新的边框属性属性描述CSSborder-image设置所有border-image-*属性的简写属性。3border-radius设置所有四个border-*-radius属性的简写属性。3box-shadow向方框添加一个或多个阴影。3三、CSS3背景CSS3背景CSS3包含多个新的背景属性,它们提供了对背景更强大的控制。在本章,您将学到以下背景属性:background-sizebackground-origin您也将学到如何使用多重背景图片。浏览器支持属性浏览器支持background-sizebackground--origin属性,对background-size的支持需要前缀-moz-。Safari4对新背景属性的支持需要前缀-webkit-。Explorer9、Firefox4、Chrome、Safari5以及Opera支持新的背景属性。CSS3background-size属性background-size属性规定背景图片的尺寸。在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。例子1调整背景图片的大小:div{background:url();-moz-background-size:63px100px;/*老版本的F