css3的含义和新特性是什么

本篇内容主要讲解“css3的含义和新特性是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3的含义和新特性是什么”吧!

CSS3是CSS（层叠样式表）技术的升级版本，指的是“层叠样式表3级”，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的JavaScript脚本以及图片。

本教程操作环境：windows7系统、CSS3版、Dell G3电脑。

CSS3是CSS（层叠样式表）技术的升级版本，指的是“层叠样式表3级”，于1999年开始制订，2001 年 5 月 23 日，W3C完成了 CSS3 的工作草案，在该草案中制定了 CSS3 发展路线图，路线图详细列出了所有模块，并计划在未来将逐步进行规范。

CSS3 是 CSS 规范的最新版本，在 CSS2.1 的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题，并且不再需要非语义标签、复杂的 JavaScript 脚本以及图片。例如，CSS3 支持圆角、多背景、透明度、阴影、动画、图表等功能。

CSS3 规范是分模块的

CSS1 和 CSS2.1 都是单一的规范，其中 CSS1 主要定义了网页对象的基本样式，如字体、颜色、背景、边框等，CSS2 添加了高级概念，如浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。

CSS3 被划分成了多个模块，每个模块都有自己的规范，这样做的好处是：

• 整个 CSS3 的规范发布不会因为部分存在争论而影响其他模块的推进。

• 对于浏览器来说，可以根据需要，决定哪些 CSS 功能被支持。

• 对于 W3C 制定者而言，可以根据需要进行针对性的更新，从而使一个整体的规范更加灵活，并能够及时修订，这样更容易扩展新的技术特定。

CSS3 新特性

CSS3 规范并不是完全另起炉灶，它集成了 CSS2.1 的部分内容，但在其基础上进行了很多的增补与修订。

与 CSS1、CSS2 相比，CSS3 进行了革命性的升级，而不仅限于局部功能的修订和完善，尽管浏览器对 CSS3 诸多新特性的支持还不是很完善，但是它依然让用户看到了未来网页样式的发展方向和使命。

CSS3 的新特性非常多，这里简单列举被浏览器广泛支持的实用特性。

1. 完善选择器

CSS3 选择器在 CSS2.1 的基础上进行了增强，它允许设计师在标签中指定特定的 HTML 元素，而不必使用多余的类、ID 或者 JavaScript 脚本。

如果希望设计干净、轻量级的网页标签，希望结构与表现更好地分离，高级选择器是非常有用的。他可以减少在标签中增加大量 class 和 id 属性的数量，并让设计师更方便地维护样式表。

2. 完善视觉效果

网页中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在 CSS 中都是依赖于设计师制作图片或者 JavaScript 脚本来实现的。

CSS3 的一些新特性可以用来创建一些特殊的视觉效果，后面的章节将为大家展现这些新特性是如何实现这些视觉效果的。

3. 完善背景效果

如果说 CSS 中的背景给你带来太多的限制，那么 CSS3 将带来革命性的变化。

CSS3 不再局限于背景色、背景图像的运用，新特性中添加了多个新的属性值，如 background-origin、background-clip、background-size；此外，还可以在一个元素上设置多个背景图片。

这样，如果要设计比较复杂的页面效果，就不再需要使用一些多余的标签来辅助实现了。例如，要实现 CSS 中的滑动门效果，在 CSS 中基本上要添加 2、3 个额外的标签来辅助实现，而 CSS3 中的这些新特性能够在一个标签中完成同样的效果。

4. 完善盒模型

盒模型在 CSS 中是重中之重，CSS2 中的盒模型只能实现一些基本的功能，对于一些特殊的功能需要基于 JavaScript 来实现。而在CSS3中，这一点得到了很大的改善，设计师可以直接通过 CSS3 来实现。

例如，CSS3 中的弹性盒子，这个属性将给大家引入一种全新的布局概念，能轻而易举地实现各种布局，特别是在移动端的布局，它的功能更是强大。

5. 增强背景功能

CSS3 允许背景属性设置多个属性值，如 background-image、background-repeat、background-size、 background-position、background-origin、background-clip 等，这样就可以在一个元素上添加多层背景图片。如果要设计复杂的网页效果（如圆角、背景重叠等），就不用为 HTML 文档添加多个无用的标签，以优化网页文档结构。

6. 增加阴影效果

阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。

文本阴影在 CSS 中己经存在，但没有得到广泛运用。CSS3 延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器方案，使文本看起来更醒目。

盒子阴影的实现在 CSS2 中就有点苦不堪言，为了实现这样的效果，需要新增标签、图片，而且效果还不一定完美。CSS3 的 box-shadow 将打破这种局面，可以轻易地为任何元素添加盒子阴影。

7. 增加多列布局与弹性盒模型布局

CSS3 引入了几个新的模块，用于更方便地创建多列布局。

多列布局（Multi-column Layout）模块描述如何像报纸、杂志那样，把一个简单的区块拆分成多列。

弹性盒模型布局（Flexible Box Layout）模块能让区块在水平、垂直方向对齐，能让区块自适应屏幕大小，相对于 CSS 的浮动布局、inline-block 布局、绝对定位布局来说，它显得更加方便与灵活。

缺点是：这两个模块在一些浏览器中还不被支持，但随着技术的发展，各主流浏览器会主动支持的。

8. 完善 Web 字体和 Web Font 图标

浏览器对 Web 字体有诸多限制，Web Font 图标对于设计师来说更奢侈。CSS3 重新引入 @font-face，对于设计师来说无疑是件好事。

@font-face 是链接服务器上的字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，不再担心用户没有这些字体而无法正常显示的问题，从此告别用图片代替特殊字体的设计时代。

9. 增强颜色和透明度功能

CSS3 颜色模块的引入，实现了制作页面效果时不再局限于 RGB 和十六进制两种模式。CSS3 增加了 HSL、HSLA、RGBA 几种新的颜色模式。在网页设计中，能轻松实现使某个颜色变得再亮一点或者再暗一点。其中 HSLA 和 RGBA 还增加了透明通道，能轻松地改变任何一个元素的透明度。

另外，还可以使用 opacity 属性来制作元素的透明度。从此制作透明度不再依赖图片或者 JavaScript 脚本了。

10. 新增圆角与边框功能

圆角是 CSS3 中使用最多的一个属性，原因很简单：圆角比直线更美观，而且不会与设计产生任何冲突。与 CSS 制作圆角不同之处是，CSS3 无须添加任何标签元素与图片，也不需借用任何 JavaScript 脚本，一个属性就能搞定。

对于边框，在 CSS 中仅局限于对边框的线型、粗细、颜色的设置，如果需要特殊的边框效果，只能使用背景图片来模仿。CSS3 的 border-image 属性使元素边框的样式变得丰富起来，还可以使用该属性实现类似 background 的效果，对边框进行扭曲、拉伸和平铺等。

11. 增加变形操作

在 CSS2 时代，让某个元素变形是一个可望而不可即的想法，为了实现这样的效果，需要写大量的 JavaScript 代码。CSS3 引进了一个变形属性，可以在 2D 或者 3D 空间里操作网页对象的位置和形状，例如旋转、扭曲、缩放或者移位。

12. 增加动画和交互效果

CSS3 过渡（transition）特性能在网页制作中实现一些简单的动画效果，让某些效果变得更具流线性、平滑性。

而 CSS3 动画（animation）特性能够实现更复杂的样式变化，以及一些交互效果，而不需要使用任何 Flash 或 JavaScript 脚本代码。

13. 完善媒体特性与 Responsive 布局

CSS3 媒体特性可以实现一种响应式（Responsive）布局，使布局可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局效果，特别是在移动端上的实现更是一种理想的做法。

到此，相信大家对“css3的含义和新特性是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！