(靠谱)CSS3_教程

《(靠谱)CSS3_教程》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CSS3教程CSS3CSS用于控制网页的样式和布局。CSS3是最新的CSS标准。现在就开始学习CSS3！CSS3实例div{transform:rotate(30deg);}亲自试一试点击“亲自试一试”按钮，看看它是如何运行的。CSS3参考手册在W3School中，我们提供完整的CSS3参考手册，包括所有属性和选择器的语法、实例、浏览器支持信息。注：本参考手册即将上线。CSS3属性参考手册CSS3浏览器支持参考手册CSS3选择器参考手册CSS颜色参考手册一、CSS3简介CSS3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持CSS2。CSS3模块CSS3被划分

2、为模块。79其中最重要的CSS3模块包括：·选择器·框模型·背景和边框·文本效果·2D/3D转换·动画·多列布局·用户界面CSS3标准W3C仍然在对CSS3规范进行开发。不过，现代浏览器已经实现了相当多的CSS3属性。二、CSS3边框CSS3边框通过CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框-并且不需使用设计软件，比如PhotoShop。在本章中，您将学到以下边框属性：·border-radius·box-shadow·border-image浏览器支持属性浏览器支持border-radiusbox-shadowborder-imageInte

3、rnetExplorer9支持border-radius和box-shadow。Firefox支持所有新的边框属性。79Chrome和Safari支持border-radius和box-shadow，但是对border-image的支持需要前缀-webkit-。Opera支持border-radius和box-shadow，但是对border-image的支持需要前缀-o-。CSS3圆角边框在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在CSS3中，创建圆角是非常容易的。在CSS3中，border-radius属性用于创建圆角：这个矩形有圆角哦

4、！实例向div元素添加圆角：div{border:2pxsolid;border-radius:25px;-moz-border-radius:25px;/*OldFirefox*/}亲自试一试CSS3边框阴影在CSS3中，box-shadow用于向方框添加阴影：实例向div元素添加方框阴影：div{box-shadow:10px10px5px#888888;79}亲自试一试CSS3边框图片通过CSS3的border-image属性，您可以使用图片来创建边框：border-image属性允许您规定用于边框的图片！用于创建上面的边框的原始图片：实例使用图片创建围绕di

5、v元素的边框：div{border-image:url(border.png)3030round;-moz-border-image:url(border.png)3030round;/*老的Firefox*/-webkit-border-image:url(border.png)3030round;/*Safari和Chrome*/-o-border-image:url(border.png)3030round;/*Opera*/}亲自试一试新的边框属性属性描述CSSborder-image设置所有border-image-*属性的简写属性。3border-rad

6、ius设置所有四个border-*-radius属性的简写属性。3box-shadow向方框添加一个或多个阴影。379三、CSS3背景CSS3背景CSS3包含多个新的背景属性，它们提供了对背景更强大的控制。在本章，您将学到以下背景属性：·background-size·background-origin您也将学到如何使用多重背景图片。浏览器支持属性浏览器支持background-sizebackground-originFirefox3.6以及更早的版本不支持background-origin属性，对background-size的支持需要前缀-moz-。Safar

7、i4对新背景属性的支持需要前缀-webkit-。InternetExplorer9、Firefox4、Chrome、Safari5以及Opera支持新的背景属性。CSS3background-size属性background-size属性规定背景图片的尺寸。在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。例子1调整背景图片的大小：79div{background:url(bg_flower