CSS 的英文全称Cascading Style Sheets，中文意思是级联样式表,通过设立样式表，可以统一地控制HMTL中各DOM元素的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
CSS的W3官方网址是:www.w3.org/TR/CSS/,在这个《你必须知道的CSS3(一)系列》中这官方资料是我主要参考资料，此外W3School的CSS3学习网址也是我这个系列的主要资料来源，也会有人问既然网站上有这么多学习资料，为什么我还出这么一个CSS的学习系列，因为一些好的学习HTML5和CSS3的网站都国外网站，虽然国内也有相关的学习网站，但上面的资源大多是一个一个的特效，并没有比较系统的学习资料，为了提高国内网页设计水平、拉近与国际网页设计水平的距离这一崇高理想
，本人不才，特准备这一CSS3的学习系列以飨网友，不足之处还望广大网友海涵，多多支持。
接下来概括下这个系列要讲的内容：
1. 盒子模型（Box Model）
2. 颜色（Color）
3. 背景与边框（Backgrouds and Borders）
4. 文本等效（Text Effects）
5. 2D和3D转换（2D/3D Transformations）
6. 动画（Animations）
7. 多列布局（Multiple Column Layout）
8. 用户界面（User Interface）
9. 选择器（Selectors）
每讲一个功能属性，我都会附上比较好的示例，来加深对CSS3的理解。上面列出的内容只是本人目前想到必须要讲的内容，以后随着本系列的深入可能会讲更多的内容，本人在学习CSS3某些新效果（2D/3D Transformations && Gradient）时，更像是定义富媒体（flash&&Sliverlight）外观，此外在讲CSS3的同时，会讲些CSS以前版本的内容。
虽然CSS3还未正式发布，但其规则制定地非常详细了，发布只是个时间问题，由于各浏览器对它的支持不尽统一，而我们要设计的网页必须要兼容浏览器，参考这个网址（www.w3schools.com/cssref/css3_browsersupport）来查看目前各浏览器对CSS3的支持情况。
下面表格显示各种浏览器前缀
| 浏览器 | 前缀 |
| Internet Explorer | -ms- |
| Firefox | -moz- |
| Google Chrome | -webkit- |
| Safari | -webkit- |
| Opera | -o- -xv-（-xv-用于voice相关的） |
如果是开发简体中文网页,浏览器的兼容性更不好做，因为国内有很多”套子浏览器”(就是那些用别人浏览器的内核,而只是换了一些外表),而这些浏览器基本上都是使用IE内核,而文档渲染模式(至少默认的)为IE7，可能还有一些更古板的国内浏览器还是IE6模式，这些情况对国内的前端设计者来说真是悲剧，所以我敢说国内网站从技术运用上来说要比国外的网站慢很多年，在IT业的其它方面也是一样的，很多IT新技术、新创意都是在国外火了，才拿到国内来应用的，比如说团购网站，哎，中国人一直在模仿。。。
说了这么多，接下来展示一个CSS3按钮的示例，来更大的激发网友们对CSS3的兴趣：
input.css3btn{ background: #0099cc; background: -moz-linear-gradient(19% 65% 90deg,#0087b4, #0099cc, #0099cc 51%); background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099cc), to(#0087b4)); border-top: 1px solid #38538c; border-right: 1px solid #1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid #1f2d4d; border-radius: 4px; -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111; color:#f0f0f0; font: bold 20px "helvetica neue", helvetica, arial, sans-serif; margin-bottom:10px; padding: 10px 0 10px 0; text-align: center; text-shadow: 0px -1px 1px #1e2d4d; width: 150px; -webkit-background-clip: padding-box; } input.css3btn:hover { -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111; box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111; cursor: pointer; } input.css3btn:active { -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; margin-top: 1px; }
这些是运用CSS3的border-radius、box-shadow和gradient（只有moz和webkit支持）制作出来的效果，当然这在支持CSS3的浏览器中观看，本人测试过在以下浏览可以看到效果：
IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。
下一章我将详细讲解盒子模型（Box Model）和边框。
