CSS3基础知识及详情

什么是CSS3

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。

在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。

注意:此课程不支持IE9版本以下,建议使用chrome、safari、firefox、opera浏览器的最高版本学习本课程。

CSS3能做什么?

CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。


对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

选择器

盒模型

背景和边框

文字特效

2D/3D转换

动画

多列布局

用户界面

CSS3 建议

W3C的CSS3规范仍在开发。

但是,许多新的CSS3属性已在现代浏览器使用。


Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> div { width:100px; height:75px; background-color:pink; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>这是一个 DIV 元素。</div> <div id="div2">这是一个 DIV 元素。</div> </body> </html>
einreichenCode zurücksetzen