从基础到进阶 · 理论与实践结合 · 视觉化交互学习
CSS3 是 层叠样式表（Cascading Style Sheets）的第三个主要版本，是现代Web设计的核心技术之一。相较于 CSS2，CSS3 带来了革命性的改进：
本教程将系统地介绍 CSS3 的核心模块，每个模块都配有可交互的 SVG 图形示例，帮助您直观理解和掌握这些强大特性。
CSS3 引入了更多强大的选择器，让我们能够更精确地选中目标元素，而无需添加额外的类名或 ID。这大大提升了代码的简洁性和可维护性。
[attr^=value] - 属性值以指定值开头的元素[attr$=value] - 属性值以指定值结尾的元素[attr*=value] - 属性值包含指定值的元素:nth-child(n) - 选择父元素的第 n 个子元素:nth-of-type(n) - 选择同类型的第 n 个元素:first-of-type / :last-of-type - 同类型的首个/最后一个元素下面的示例展示了 :nth-child() 伪类选择器的效果。我们使用 SVG 绘制了 6 个圆形，并通过不同的选择器为它们应用不同的颜色：
/* 示例代码 */
.circle-item:nth-child(1) { fill: #ff6b6b; } /* ← 选中第1个 */
.circle-item:nth-child(3) { fill: #4ecdc4; } /* ← 选中第3个 */
.circle-item:nth-child(even) { fill: #ffe66d; } /* ← 选中所有偶数项 */
效果说明：红色圆形是第1个子元素，青色是第3个，黄色是所有偶数位置的元素。鼠标悬停时圆形会放大并产生发光效果。
CSS3 对盒模型进行了增强，最重要的是引入了 box-sizing 属性来控制盒模型的计算方式，以及 border-radius 和
box-shadow 等视觉特性。
box-sizing: content-box | border-box - 盒模型计算方式border-radius: <length> - 圆角半径，可单独设置四个角box-shadow: h-offset v-offset blur spread color - 盒阴影下面展示了圆角（border-radius）和阴影（box-shadow）的效果：
/* 圆角示例 */
.box1 { border-radius: 0; } /* ← 无圆角 */
.box2 { border-radius: 15px; } /* ← 小圆角 */
.box3 { border-radius: 50%; } /* ← 完全圆形 */
/* 阴影示例 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* ← 添加阴影 */
效果说明：通过调整 border-radius 值，可以创建从直角矩形到完全圆形的各种形状。阴影为元素增加了立体感和层次感。
CSS3 大幅提升了背景和边框的表现力。最重要的是引入了渐变（Gradient），使我们无需图片即可创建丰富的色彩过渡效果。
background-size: cover | contain | <length> - 背景尺寸linear-gradient(direction, color-stop1, color-stop2, ...) - 线性渐变radial-gradient(shape, color-stop1, color-stop2, ...) - 径向渐变background-clip: border-box | padding-box | content-box - 背景裁剪下面展示了线性渐变和径向渐变的效果：
/* 线性渐变 (从左到右) */
background: linear-gradient(to right, #667eea, #764ba2); /* ← 水平渐变 */
/* 线性渐变 (对角) */
background: linear-gradient(135deg, #f093fb, #f5576c); /* ← 对角渐变 */
/* 径向渐变 (从中心向外) */
background: radial-gradient(circle, #ffeaa7, #fd79a8); /* ← 径向渐变 */
效果说明：渐变是CSS3最强大的特性之一，可以创建从简单到复杂的各种视觉效果，完全不需要图片资源。
CSS3 Transform 允许我们对元素进行2D和3D变换，包括平移、旋转、缩放和倾斜。这些变换不会影响文档流，非常适合创建动画效果。
translate(x, y) - 平移元素rotate(angle) - 旋转元素scale(x, y) - 缩放元素skew(x-angle, y-angle) - 倾斜元素transform-origin - 设置变换的原点下面展示了不同变换效果的对比：
/* 平移 */
transform: translate(20px, -10px); /* ← 向右20px，向上10px */
/* 旋转 */
transform: rotate(45deg); /* ← 顺时针旋转45度 */
/* 缩放 */
transform: scale(0.7); /* ← 缩小到70% */
/* 组合变换 */
transform: translate(10px, -5px) rotate(30deg) scale(0.9); /* ← 组合多个变换 */
效果说明：虚线框表示原始位置，实心框显示变换后的效果。变换可以组合使用，创建复杂的视觉效果。
CSS3 Transition 允许属性值在一段时间内平滑地从一个值过渡到另一个值，创建流畅的动画效果。这是实现交互式动画的最简单方式。
transition-property - 指定要过渡的CSS属性transition-duration - 过渡持续时间transition-timing-function - 过渡时间曲线 (ease, linear, ease-in, ease-out 等)transition-delay - 过渡延迟时间transition - 简写属性下面的圆形在悬停时会改变颜色和大小，展示平滑过渡效果：
/* 过渡设置 */
.circle {
transition: all 0.5s ease; /* ← 所有属性都在0.5秒内平滑过渡 */
}
/* 悬停状态 */
.circle:hover {
fill: #ff6b6b; /* ← 改变颜色 */
transform: scale(1.3); /* ← 放大1.3倍 */
}
效果说明：鼠标悬停时，圆形会平滑地改变颜色和大小。transition 使这些变化不是瞬间完成，而是在指定时间内逐渐过渡。
CSS3 Animation 比 Transition 更强大，允许我们定义关键帧（keyframes）来创建复杂的、连续的动画效果，而不需要用户交互触发。
@keyframes - 定义动画的关键帧animation-name - 引用keyframes的名称animation-duration - 动画持续时间animation-iteration-count - 动画循环次数 (infinite 表示无限循环)animation-direction - 动画方向 (normal, reverse, alternate)animation-timing-function - 动画时间函数下面展示了三种不同的连续动画效果：
/* 定义脉动动画 */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; } /* ← 中间状态放大并半透明 */
}
/* 应用动画 */
.element {
animation: pulse 2s ease-in-out infinite; /* ← 2秒循环，无限重复 */
}
效果说明：这些动画会自动、持续地运行。通过 @keyframes 定义不同时间点的状态，CSS 会自动计算中间的过渡。
Flexbox（弹性盒子布局）是 CSS3 引入的革命性布局模式，它使元素在容器中的排列、对齐和分配空间变得极其简单，特别适合响应式设计。
display: flex - 定义弹性容器flex-direction - 主轴方向 (row, column, row-reverse, column-reverse)justify-content - 主轴对齐 (flex-start, center, space-between, space-around)align-items - 交叉轴对齐 (flex-start, center, flex-end, stretch)flex-wrap - 是否换行 (nowrap, wrap)flex-grow - 放大比例flex-shrink - 缩小比例flex-basis - 基础尺寸下面用 SVG 模拟 Flexbox 的不同对齐方式：
/* Flexbox 容器 */
.container {
display: flex; /* ← 启用 Flexbox */
justify-content: space-between; /* ← 主轴对齐方式 */
align-items: center; /* ← 交叉轴对齐方式 */
}
/* 垂直布局 */
.container-vertical {
flex-direction: column; /* ← 垂直排列 */
}
效果说明：虚线框代表 Flex 容器，实心框是子项。通过改变 justify-content 和
align-items，可以轻松实现各种对齐效果。
恭喜您完成 CSS3 核心特性的学习！让我们回顾一下：
CSS3 为现代 Web 开发带来了革命性的变化。掌握这些特性，您就能创建出既美观又高效的网页。
💡 下一步建议：尝试将这些特性组合使用，创建自己的项目，在实践中不断提升！