CSS3 技术中的数字 3 代表什么含义

在讨论 CSS3时，数字“3”表示这是CSS（Cascading Style Sheets，层叠样式表）的第三个版本。CSS是一种用于描述HTML（或XML和SVG）文档如何被呈现或显示的样式表语言。CSS3并非一个单一的规范，而是一系列的模块，每个模块都有各自独立的功能和特性。

以下是CSS3技术的一些主要特性和应用实例:

1. 选择器：CSS3引入了许多新的选择器，这些选择器使得开发者更容易、更精确地选择和修改元素。例如，CSS3允许使用属性选择器，可以根据元素的属性和属性值来选择元素。例如，input[type="text"]选择所有类型为文本的输入元素。

在下图这个 Spartacus 的 scss 文件里有大量的选择器使用案例：

2. 边框和背景：CSS3增加了对边框和背景的控制。例如，可以使用border-radius创建圆角边框，使用box-shadow添加元素阴影，或使用background-size控制背景图像的尺寸。

下面是具体的例子：

3. 动画和过渡：CSS3引入了动画和过渡功能，使得页面元素可以在不使用JavaScript的情况下实现平滑的动态效果。例如，可以用transition属性在一段时间内改变元素的某些样式，或用@keyframes规则和animation属性创建复杂的动画。

4. 布局：CSS3提供了许多新的布局工具，如Flexbox和Grid，这些工具使得创建复杂的响应式布局变得更加简单。例如，可以使用display: flex创建一个弹性布局，或使用display: grid创建一个网格布局。

5. 媒体查询：CSS3引入了媒体查询，使得样式可以根据设备的特性（如视口宽度或设备方向）进行调整。例如，可以使用@media规则创建一个样式，当视口宽度小于600px时，修改元素的布局或样式。

6. 2D/3D转换：CSS3引入了2D和3D转换功能，使得元素可以在不使用JavaScript的情况下实现各种转换效果。例如，可以使用transform属性旋转、缩放、倾斜或移动元素。

7. 文字和字体：CSS3对文字和字体的控制也有所增强。例如，可以使用@font-face规则导入自定义字体，或使用text-shadow添加文本阴影。