"CSS3 Latest Edition Reference Manual" is the official CSS3 online reference learning manual. This CSS3 online development manual contains various CSS3 properties, syntax, definitions, usage methods, example operations, etc. It is indispensable for web front-end learners and developers. Check manual documents online! Note: CSS3 is an upgraded version of CSS technology. CSS3 language development is developing towards modularization. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc.
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。
但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 。
CSS用于控制网页的样式和布局。CSS3则是最新的 CSS 标准。
CSS3语言基础
CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。
CSS选择器中的大部分并不是在CSS3中新添加的，只是在之前的版本中没有得到广泛的应用。
如果想尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的，它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。
创建并运行第一个CSS3实例
实例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
是不是非常简单有趣！CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。
提示：我们的CSS3教程将帮助您逐步学习了解CSS3中的新特性以及如何同时控制多重网页的样式和布局。如果你有任何疑问，请前往PHP中文网CSS3社区提出你的问题，会有热心网友为你解答。
CSS3优势
减少开发成本与维护成本
在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。
这样，CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。
如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS2.1，需要从头绘图、切图才能实现，使用CSS3只需修改border-radius属性值就可快速完成修改。
CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
提高页面性能
很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。
另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。
例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。
因此，在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 。
CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。
本CSS3教程手册涵盖的内容
本CSS3教程手册涵盖了所有CSS3新特性，包含了如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等新特性的介绍及运行实例。
提示：本教程的每一章都包含了很多CSS3实例，您可以直接点击 "运行实例" 按钮在线查看运行结果。这些例子将帮助您更好地理解和使用CSS3新特性。
其它CSS3相关学习参考资源
除了本页面右侧的知识拓展，还为大家精选了以下资源
Latest chapter
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
Related courses
- Quick introduction to web front-end development 2021-12-10
- The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Gulp Getting Started Video Tutorial 2022-04-18
- Brothers in Arms Gao Luofeng CSS3 video tutorial 2022-04-20
- AngularJS development web application basic example video tutorial 2022-04-18
- Ajax full contact 2022-04-13
- MUI framework basic video tutorial 2022-04-13
- Online training class trial class 2019-01-10