从基础到进阶 · 理论与实践结合 · 视觉化交互学习
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，可以轻松实现各种对齐效果。
实用技巧：使用 gap 属性可以简化子项间距的设置，不再需要使用 margin 来调整。
CSS Grid 是 CSS3 中最强大的布局系统，它提供了基于二维网格的布局方式，可以同时控制行和列，特别适合复杂的页面布局。
display: grid - 定义网格容器grid-template-columns - 定义列的数量和宽度grid-template-rows - 定义行的数量和高度gap / grid-gap - 定义网格间距grid-template-areas - 定义命名网格区域grid-column - 子项跨列范围grid-row - 子项跨行范围grid-area - 子项放置在命名区域| 特性 | Flexbox | Grid |
|---|---|---|
| 布局维度 | 一维（行或列） | 二维（行和列） |
| 适用场景 | 组件内部布局、导航栏 | 页面整体布局、复杂网格 |
| 对齐控制 | 主轴和交叉轴 | 行对齐和列对齐独立控制 |
| 内容影响 | 内容驱动布局 | 布局驱动内容 |
下面用 SVG 模拟 Grid 布局的效果：
/* Grid 容器 */
.container {
display: grid; /* ← 启用 Grid */
grid-template-columns: repeat(3, 1fr); /* ← 3列等宽 */
grid-template-rows: auto; /* ← 行高自动 */
gap: 20px; /* ← 网格间距 */
}
/* 跨列 */
.header { grid-column: span 2; } /* ← 跨2列 */
/* 命名区域 */
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
效果说明：Grid 布局可以轻松实现复杂的页面结构，如常见的“头部-侧边栏-主内容-底部”布局，代码简洁直观。
CSS 变量（也称为自定义属性）是 CSS3 中非常实用的特性，它允许我们定义可重复使用的值，大大提升了 CSS 的可维护性和灵活性。
--variable-name: value; - 定义变量（以 -- 开头）var(--variable-name) - 使用变量var(--variable-name, fallback) - 使用变量并提供默认值:root { } - 在根元素定义全局变量下面展示 CSS 变量在主题切换中的应用：
/* 定义全局变量 */
:root {
--primary-color: #007bff; /* ← 主色 */
--secondary-color: #6c757d;
--bg-color: #f8f9fa;
--text-color: #212529;
--spacing: 16px;
--border-radius: 8px;
}
/* 使用变量 */
.button {
background: var(--primary-color); /* ← 使用变量 */
padding: var(--spacing);
border-radius: var(--border-radius);
}
/* 暗色主题 - 重新定义变量 */
[data-theme="dark"] {
--bg-color: #212529;
--text-color: #f8f9fa;
}
注意事项：CSS 变量与 Sass/Less 等预处理器变量不同，它是原生 CSS 特性，可以在运行时动态改变，而预处理器变量在编译时就已经固定。
响应式设计是现代 Web 开发的核心理念，CSS3 的媒体查询（Media Queries）是实现响应式设计的关键技术，让网页能够适应不同屏幕尺寸。
@media (max-width: 768px) - 屏幕宽度小于等于 768px 时应用@media (min-width: 1024px) - 屏幕宽度大于等于 1024px 时应用@media (orientation: portrait) - 竖屏模式@media (prefers-color-scheme: dark) - 系统暗色模式@media print - 打印样式| 设备类型 | 屏幕宽度 | 常用断点 |
|---|---|---|
| 📱 手机 | < 576px | max-width: 575.98px |
| 📱 大屏手机 | ≥ 576px | min-width: 576px |
| 💻 平板 | ≥ 768px | min-width: 768px |
| 💻 笔记本 | ≥ 992px | min-width: 992px |
| 🖥️ 桌面 | ≥ 1200px | min-width: 1200px |
下面展示了不同屏幕尺寸下的布局变化：
/* 基础样式 - 移动优先 */
.container {
display: flex;
flex-direction: column; /* ← 默认单列 */
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
flex-direction: row; /* ← 横向排列 */
}
.sidebar { width: 250px; }
.main { flex: 1; }
}
/* 桌面 */
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
移动优先策略：建议先编写移动端样式，然后使用 min-width 媒体查询逐步增强大屏幕样式。这样可以确保移动端体验优先。
CSS3 的 Filter 和 Blend Mode 特性为网页带来了类似 Photoshop 的图像处理能力，无需图片编辑器即可实现丰富的视觉效果。
blur(px) - 高斯模糊，常用于背景虚化brightness(%) - 调整亮度，100%为原始值contrast(%) - 调整对比度grayscale(%) - 灰度化，100%为完全灰度saturate(%) - 调整饱和度hue-rotate(deg) - 色相旋转drop-shadow() - 投影效果，支持透明图片invert(%) - 反色效果sepia(%) - 复古褐色效果multiply - 正片叠底，变暗screen - 滤色，变亮overlay - 叠加，增强对比darken / lighten - 取暗/取亮color-dodge / color-burn - 颜色减淡/加深difference - 差值，创造独特效果hue / saturation / color / luminosity - 色彩属性混合下面展示了常用滤镜效果：
/* 滤镜效果 */
.image {
filter: blur(5px); /* ← 模糊 */
filter: grayscale(100%); /* ← 灰度化 */
filter: brightness(1.2) contrast(1.1); /* ← 组合使用 */
}
/* 混合模式 */
.overlay-text {
mix-blend-mode: difference; /* ← 与背景混合 */
}
.bg-blend {
background: url(image.jpg), linear-gradient(#667eea, #764ba2);
background-blend-mode: overlay; /* ← 背景图与渐变混合 */
}
性能提示：filter 属性会触发硬件加速，但复杂滤镜仍可能影响性能。建议在动画中使用 will-change: filter 进行优化。
CSS3 为文字排版和视觉效果带来了许多强大的新特性，让网页排版更加精致，视觉效果更加丰富。
text-shadow - 文字阴影，可叠加多层text-overflow: ellipsis - 文字溢出显示省略号word-wrap / overflow-wrap - 长单词换行text-stroke - 文字描边（WebKit）writing-mode - 垂直/横向排版@font-face - 自定义字体object-fit - 图片填充模式 (cover, contain, fill)clip-path - 裁剪路径，创建不规则形状shape-outside - 文字环绕不规则形状scroll-snap - 滚动吸附，创建幻灯片效果aspect-ratio - 固定宽高比backdrop-filter - 背景滤镜，比模糊更精细下面展示文字阴影和裁剪路径的效果：
/* 文字发光效果 */
.glow-text {
text-shadow: 0 0 10px #00d4ff,
0 0 20px #00d4ff,
0 0 30px #00d4ff; /* ← 多层阴影叠加 */
}
/* 渐变文字 */
.gradient-text {
background: linear-gradient(90deg, #00d4ff, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* ← 文字填充渐变 */
}
/* 裁剪路径 */
.circle-image {
clip-path: circle(50%); /* ← 圆形 */
}
.polygon-shape {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); /* ← 五边形 */
}
实用工具：推荐使用 Clippy 在线工具可视化生成 clip-path 代码，大大提高开发效率。
恭喜您完成 CSS3 核心特性的学习！让我们回顾一下：
CSS3 为现代 Web 开发带来了革命性的变化。掌握这些特性，您就能创建出既美观又高效的网页。
💡 下一步建议：尝试将这些特性组合使用，创建自己的项目，在实践中不断提升！
推荐资源：MDN Web Docs 是学习 CSS3 的权威参考，建议收藏并经常查阅。另外，CSS-Tricks 和 Smashing Magazine 也有很多优质的 CSS 教程和最佳实践。