CSS3 新增特性
CSS3 引入了许多 新特性，使得 网页设计 和 开发 更加灵活 和 强大。以下是一些主要的 CSS3 新增特性：
1 选择器（Selectors）
:nth-child() 、 :nth-of-type() ：允许 更精确地 选择 特定的 子元素，支持 按序列 选择 元素，它没有指定的父容器，即没有限定区域。
div:nth-child(2) { /* 选择父元素中的第二个元素 且该元素必须为为 div 元素 */ }
div:nth-of-type(2) { /* 选择父元素中的第二个 div 元素 */ }
:not() ：可以用来选择 不符合某条件的 元素。
div:not(.active) { /* 选择不含有 active 类的 div 元素 */ }
2 布局与盒模型（Layout & Box Model）
box-sizing: border-box：使得元素的width和height包括padding和border，简化布局；- 弹性盒模型（Flexbox） ：允许灵活的布局，能够 自适应 容器的大小，排列子元素。常用于 响应式设计 和 现代布局；
- 网格布局（CSS Grid Layout） ：提供一种更强大且复杂的方式来创建 二维网格布局，适用于复杂的 网页布局。
3 圆角与边框（Borders & Corners）
border-radius：可以让元素的角变圆，实现 圆角效果；box-shadow和text-shadow：添加元素的 阴影效果，可以控制阴影的偏移、模糊程度和颜色。
4 渐变与背景（Backgrounds & Gradients）
- 线性渐变（
linear-gradient） 和 径向渐变（radial-gradient） ：创建 渐变背景； - 多背景图：支持为一个元素 设置 多个背景图层。
5 过渡与动画（Transitions & Animations）
- CSS3 过渡（
transition） ：让元素在 状态变化 时 平滑过渡，控制变化的 持续时间 和 方式； - CSS 动画（
@keyframes） ：允许创建 更复杂的 动画效果，可以定义元素 在动画过程中 从 一个状态 到 另一个状态 的变化。
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite;
}
6 变形与转换（Transforms）
transform：允许对元素进行 平移、缩放、旋转 等变形操作。
7 媒体查询（Media Queries）
响应式设计：使用媒体查询 来针对 不同屏幕尺寸 和 设备特性 应用 不同的样式。
@media (max-width: 768px) {
.container {
flex-direction: column; /* 在屏幕宽度小于 768px 时改为列布局 */
}
}
8 字体与文本（Text & Fonts）
@font-face：允许在网页中嵌入 自定义字体；text-shadow：为文本添加 阴影效果；- Web字体：通过
font-feature-settings控制 OpenType 字体的 高级特性（如 字形替代等）。
9 自定义属性（CSS Variables）
CSS 变量：允许在 CSS 中使用 可重复使用的变量 来存储值，简化维护和修改。
:root {
--primary-color: #3498db;
}
.box {
background-color: var(--primary-color); /* 使用变量 */
}
10 渐变与滤镜（Filters）
filter：为元素应用 图像处理效果，如 模糊、亮度、对比度 等。
.image {
filter: blur(5px); /* 模糊效果 */
}
11 多列布局（Multi-column Layout）
column-count 和 column-gap：允许创建 多列文本 布局。
.content {
column-count: 3; /* 将内容分成 3 列 */
column-gap: 20px; /* 列之间的间距 */
}
