摘要：本文系统总结 CSS3 核心知识点，涵盖 CSS3 新特性概览、盒模型增强、背景边框升级、文本效果、渐变技术、Web 字体、2D/3D 变换、过渡与动画等核心内容。每个知识点配有完整代码示例、参数详解、实战场景及常见问题解答，帮助前端开发者系统掌握 CSS3 现代布局与视觉效果技术。
关键词：CSS3、CSS变换、CSS动画、渐变、Web字体、弹性盒子、前端开发、响应式设计
适合人群：CSS2 基础开发者、前端进阶学习者、UI 开发工程师、准备面试的前端工程师
阅读时间：约 40 分钟
版本信息：CSS3 | 兼容现代浏览器（部分特性需私有前缀）
一、CSS3 简介
1.1 CSS3 概述
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS3 的未来发展：CSS3 在未来会按照模块化的方式去发展，官方工作草案查看：W3C CSS Current Work
CSS3 核心新特性：
| 选择器 | 动态伪类、目标伪类、伪元素等 | 精准元素定位 |
| 视觉效果 | 圆角、阴影、渐变 | 现代化 UI 设计 |
| 背景效果 | 多背景图、背景尺寸控制 | 复杂背景设计 |
| 布局方案 | 弹性盒子 (Flexbox) | 响应式布局 |
| 字体增强 | Web 字体、字体图标 | 跨平台字体显示 |
| 颜色增强 | HSL、HSLA、RGBA、opacity | 精确颜色控制 |
| 变换效果 | 2D/3D 变换（旋转、缩放、位移等） | 动态视觉效果 |
| 动画系统 | 过渡 (Transition)、动画 (Animation) | 流畅交互体验 |
1.2 CSS3 私有前缀
1.2.1 什么是私有前缀
私有前缀是浏览器厂商在正式支持某个 CSS 特性之前，用于测试该特性的前缀标识。
/* 示例：-webkit- 是 Chrome/Safari 的私有前缀 */
div {
width: 400px;
height: 400px;
-webkit-border-radius: 20px; /* Chrome/Safari */
}
1.2.2 为什么需要私有前缀
W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性。在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。
完整私有前缀示例：
/* 完整的私有前缀写法（现代开发中已不推荐手动编写） */
div {
-webkit-border-radius: 20px; /* Chrome, Safari, 新版 Opera */
-moz-border-radius: 20px; /* Firefox */
-ms-border-radius: 20px; /* IE */
-o-border-radius: 20px; /* 旧版 Opera */
border-radius: 20px; /* 标准写法 */
}
1.2.3 常见浏览器私有前缀
| Chrome | -webkit- | 基于 WebKit/Blink 内核 |
| Safari | -webkit- | 基于 WebKit 内核 |
| Firefox | -moz- | 基于 Gecko 内核 |
| Edge | -webkit- | 新版 Edge 基于 Chromium |
| 旧 Opera | -o- | 旧版 Opera 基于 Presto 内核 |
| 旧 IE | -ms- | IE 浏览器 |
💡 开发建议：我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的。即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具（如 Autoprefixer），去帮我们自动添加私有前缀。
查询 CSS3 兼容性的网站：Can I Use
📚 官方文档：CSS3 浏览器前缀 – MDN
二、CSS3 基础增强
2.1 新增长度单位
CSS3 新增了多种实用的长度单位，让响应式设计更加灵活。
| rem | 根元素字体大小的倍数 | 2rem = 根元素字体大小 × 2 | 响应式布局、移动端适配 |
| vw | 视口宽度的百分比 | 10vw = 视口宽度 × 10% | 全屏宽度元素 |
| vh | 视口高度的百分比 | 10vh = 视口高度 × 10% | 全屏高度元素 |
| vmax | 视口宽高中较大者的百分比 | 10vmax | 了解即可 |
| vmin | 视口宽高中较小者的百分比 | 10vmin | 了解即可 |
实战示例：
/* 使用 rem 实现响应式字体 */
html {
font-size: 16px; /* 根元素字体大小 */
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}
/* 使用 vw/vh 实现全屏元素 */
.hero-section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* 移动端适配常用方案 */
.container {
padding: 5vw; /* 根据视口宽度自适应 */
}
💡 rem vs em：rem 相对于根元素（<html>），而 em 相对于父元素。rem 更容易控制全局比例。
2.2 新增盒模型属性
2.2.1 box-sizing 怪异盒模型
使用 box-sizing 属性可以设置盒模型的两种类型。
| content-box | width 和 height 设置的是盒子内容区的大小（默认值） | 总宽度 = width + padding + border |
| border-box | width 和 height 设置的是盒子总大小（怪异盒模型） | 内容宽度 = width – padding – border |
/* 默认盒模型 */
.box1 {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* 实际宽度：200 + 20*2 + 5*2 = 250px */
}
/* 怪异盒模型（推荐） */
.box2 {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* 实际宽度：200px（内容区自动调整为 150px） */
}
💡 最佳实践：现代开发中，推荐全局设置 box-sizing: border-box;，这样更容易控制元素尺寸。
/* 全局设置 */
*, *::before, *::after {
box-sizing: border-box;
}
2.2.2 resize 调整盒子大小
使用 resize 属性可以控制是否允许用户调节元素尺寸。
| none | 不允许用户调整元素大小（默认值） |
| both | 用户可以调节元素的宽度和高度 |
| horizontal | 用户可以调节元素的宽度 |
| vertical | 用户可以调节元素的高度 |
/* 允许用户调整大小 */
.resizable {
resize: both;
overflow: auto; /* 必须设置 overflow 为非 visible 值 */
min-width: 200px;
min-height: 100px;
max-width: 500px;
max-height: 400px;
}
💡 注意：resize 属性生效的前提是元素的 overflow 属性不能是 visible。
2.2.3 box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
| h-shadow | 水平阴影位置，可为负值 | ✅ 必需 |
| v-shadow | 垂直阴影位置，可为负值 | ✅ 必需 |
| blur | 模糊距离 | ❌ 可选 |
| spread | 阴影外延值 | ❌ 可选 |
| color | 阴影颜色 | ❌ 可选 |
| inset | 改为内部阴影 | ❌ 可选 |
示例：
/* 基础阴影 */
.box {
box-shadow: 10px 10px; /* 水平、垂直 */
box-shadow: 10px 10px red; /* + 颜色 */
box-shadow: 10px 10px 10px; /* + 模糊 */
box-shadow: 10px 10px 10px red; /* 完整四值 */
box-shadow: 10px 10px 10px 10px blue; /* + 外延 */
box-shadow: 10px 10px 20px 3px blue inset;/* + 内阴影 */
}
/* 现代卡片阴影效果 */
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
/* 多层阴影效果 */
.elevated {
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
}
2.2.4 opacity 不透明度
opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间的小数，0 是完全透明，1 表示完全不透明。
opacity 与 rgba 的区别：
| 类型 | CSS 属性 | 颜色表示方式 |
| 影响范围 | 整个元素（包括子元素） | 仅影响颜色透明度 |
| 继承性 | 子元素会继承 | 不继承 |
| 使用场景 | 整体透明效果 | 背景/边框透明 |
/* opacity 影响整个元素及子元素 */
.transparent-box {
opacity: 0.5; /* 50% 透明度 */
}
/* rgba 仅影响背景色 */
.semi-transparent-bg {
background-color: rgba(0, 0, 0, 0.5); /* 背景半透明，文字不受影响 */
}
📚 官方文档：CSS 盒模型 – MDN
2.3 背景属性升级
CSS3 对背景属性进行了全面升级，支持更复杂的背景效果。
2.3.1 background-origin 背景原点
作用：设置背景图的原点（从哪个区域开始显示背景图）。
| padding-box | 从 padding 区域开始显示背景图（默认值） |
| border-box | 从 border 区域开始显示背景图 |
| content-box | 从 content 区域开始显示背景图 |
.box {
border: 10px dashed black;
padding: 20px;
background-image: url('bg.png');
background-repeat: no-repeat;
/* 背景图从 padding 区域开始（默认） */
background-origin: padding-box;
/* 背景图从 border 区域开始 */
background-origin: border-box;
/* 背景图从 content 区域开始 */
background-origin: content-box;
}
2.3.2 background-clip 背景裁剪
作用：设置背景图的向外裁剪的区域。
| border-box | 从 border 区域开始向外裁剪背景（默认值） |
| padding-box | 从 padding 区域开始向外裁剪背景 |
| content-box | 从 content 区域开始向外裁剪背景 |
| text | 背景图只呈现在文字上（需加 -webkit- 前缀） |
/* 文字渐变效果 */
.gradient-text {
font-size: 60px;
font-weight: bold;
background: linear-gradient(to right, #ff0000, #00ff00);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* 文字颜色透明，显示背景 */
}
2.3.3 background-size 背景尺寸
作用：设置背景图的尺寸。
| auto | 背景图片的真实大小（默认值） |
| 长度值 | 用长度值指定，如 300px 200px，不允许负值 |
| 百分比 | 用百分比指定，如 100% 100%，不允许负值 |
| contain | 等比缩放，使图片完整显示，可能留白 |
| cover | 等比缩放，完全覆盖容器，可能裁剪（推荐） |
.box {
background-image: url('bg.jpg');
background-repeat: no-repeat;
/* 固定尺寸 */
background-size: 300px 200px;
background-size: 100% 100%;
/* 自适应 */
background-size: contain; /* 完整显示，可能留白 */
background-size: cover; /* 完全覆盖，可能裁剪 */
}
2.3.4 background 复合属性
语法：background: color url repeat position / size origin clip
注意：
/* 完整写法 */
.box {
background: #fff url('bg.jpg') no-repeat center / cover padding-box content-box;
}
2.3.5 多背景图
CSS3 允许元素设置多个背景图片，用逗号分隔。
.box {
background:
url('bg-lt.png') no-repeat left top,
url('bg-rt.png') no-repeat right top,
url('bg-lb.png') no-repeat left bottom,
url('bg-rb.png') no-repeat right bottom;
}
📚 官方文档：CSS 背景 – MDN
2.4 边框属性升级
2.4.1 border-radius 边框圆角
使用 border-radius 属性可以将盒子变为圆角。
基础用法：
/* 统一设置四个角 */
.box {
border-radius: 10px; /* 四个角都是 10px 圆角 */
}
/* 分别设置四个角 */
.box {
border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下 */
}
/* 圆形 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* 正圆 */
}
分开设置每个角：
| border-top-left-radius | 设置左上角圆角半径 |
| border-top-right-radius | 设置右上角圆角半径 |
| border-bottom-right-radius | 设置右下角圆角半径 |
| border-bottom-left-radius | 设置左下角圆角半径 |
椭圆角（一个值是正圆半径，两个值分别是椭圆的 x 半径、y 半径）：
/* 椭圆角 */
.ellipse {
border-radius: 50px / 30px; /* x 半径 50px，y 半径 30px */
}
/* 完整语法：左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y */
.box {
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}
2.4.2 outline 边框外轮廓
outline 是绘制在元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
/* outline 复合属性 */
.box {
outline: 5px solid blue;
}
/* outline-offset 设置外轮廓与边框的距离 */
.box {
outline: 5px solid blue;
outline-offset: 10px; /* 外轮廓距离边框 10px */
}
💡 注意：outline-offset 不是 outline 的子属性，是一个独立的属性。
2.5 文本效果增强
2.5.1 text-shadow 文本阴影
使用 text-shadow 属性给文本添加阴影。
语法：text-shadow: h-shadow v-shadow blur color;
| h-shadow | 水平阴影位置，允许负值 | ✅ 必需 |
| v-shadow | 垂直阴影位置，允许负值 | ✅ 必需 |
| blur | 模糊距离 | ❌ 可选 |
| color | 阴影颜色 | ❌ 可选 |
/* 基础文本阴影 */
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 发光效果 */
.glow {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073;
}
/* 3D 文字效果 */
.text-3d {
text-shadow:
1px 1px 0 #ccc,
2px 2px 0 #bbb,
3px 3px 0 #aaa;
}
2.5.2 white-space 文本换行
| normal | 超出边界自动换行，文本中的换行被识别为一个空格（默认值） |
| pre | 原样输出，与 <pre> 标签效果相同 |
| pre-wrap | 在 pre 效果的基础上，超出元素边界自动换行 |
| pre-line | 保留换行，忽略空格，超出边界自动换行 |
| nowrap | 强制不换行 |
/* 强制不换行 */
.no-wrap {
white-space: nowrap;
}
/* 保留格式 */
.preserve-format {
white-space: pre-wrap;
}
2.5.3 text-overflow 文本溢出
| clip | 超出时裁切掉（默认值） |
| ellipsis | 超出时显示 … |
💡 注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值，white-space 为 nowrap 值。
/* 单行文本溢出省略 */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2.5.4 text-decoration 文本修饰升级
CSS3 将 text-decoration 升级为复合属性。
| text-decoration-line | 装饰线位置 | none、underline、overline、line-through |
| text-decoration-style | 装饰线形状 | solid、double、dotted、dashed、wavy |
| text-decoration-color | 装饰线颜色 | 任意颜色值 |
/* 波浪线下划线 */
.wavy-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
/* 简写 */
text-decoration: underline wavy red;
}
2.5.5 text-stroke 文本描边
⚠️ 注意：文字描边功能仅 webkit 内核浏览器支持。
/* 文字描边 */
.stroke-text {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: blue;
/* 简写 */
-webkit-text-stroke: 2px blue;
}
📚 官方文档：CSS 文本 – MDN
三、CSS3 渐变技术
3.1 线性渐变
多个颜色之间的渐变，默认从上到下渐变。
基础语法：background-image: linear-gradient(方向, 颜色1, 颜色2, …);
3.1.1 使用关键词设置方向
/* 默认：从上到下 */
.box {
background-image: linear-gradient(red, yellow, green);
}
/* 从下到上 */
.box {
background-image: linear-gradient(to top, red, yellow, green);
}
/* 从左到右 */
.box {
background-image: linear-gradient(to right, red, yellow, green);
}
/* 到右上角 */
.box {
background-image: linear-gradient(to right top, red, yellow, green);
}
3.1.2 使用角度设置方向
/* 30 度角方向 */
.box {
background-image: linear-gradient(30deg, red, yellow, green);
}
/* 45 度角（默认对角线方向） */
.box {
background-image: linear-gradient(45deg, red, yellow, green);
}
3.1.3 调整渐变位置
/* 在指定位置开始渐变 */
.box {
background-image: linear-gradient(
red 50px, /* 红色到 50px 位置 */
yellow 100px, /* 黄色从 100px 位置开始 */
green 150px /* 绿色从 150px 位置开始 */
);
}
3.2 径向渐变
多个颜色之间的渐变，默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
基础语法：background-image: radial-gradient(参数, 颜色1, 颜色2, …);
3.2.1 调整圆心位置
/* 默认：从圆心四散 */
.box {
background-image: radial-gradient(red, yellow, green);
}
/* 使用关键词调整圆心 */
.box {
background-image: radial-gradient(at right top, red, yellow, green);
}
/* 使用像素值调整圆心 */
.box {
background-image: radial-gradient(at 100px 50px, red, yellow, green);
}
3.2.2 调整渐变形状
/* 正圆 */
.box {
background-image: radial-gradient(circle, red, yellow, green);
}
/* 调整半径 */
.box {
background-image: radial-gradient(100px, red, yellow, green);
}
/* 椭圆 */
.box {
background-image: radial-gradient(50px 100px, red, yellow, green);
}
3.2.3 调整渐变位置
/* 在指定位置开始渐变 */
.box {
background-image: radial-gradient(
red 50px,
yellow 100px,
green 150px
);
}
3.3 重复渐变
无论线性渐变还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
/* 重复线性渐变 */
.box {
background-image: repeating-linear-gradient(
45deg,
red,
red 10px,
yellow 10px,
yellow 20px
);
}
/* 重复径向渐变 */
.box {
background-image: repeating-radial-gradient(
circle,
red,
red 10px,
yellow 10px,
yellow 20px
);
}
💡 创意应用：我们可以利用渐变，做出很多有意思的效果：例如横格纸、立体球、条纹背景等。
/* 横格纸效果 */
.notebook {
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent 19px,
#ccc 19px,
#ccc 20px
);
}
/* 条纹背景 */
.striped {
background-image: repeating-linear-gradient(
45deg,
#f0f0f0,
#f0f0f0 10px,
#fff 10px,
#fff 20px
);
}
📚 官方文档：CSS 渐变 – MDN
四、Web 字体与图标
4.1 @font-face 基本用法
可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。
基础写法：
@font-face {
font-family: "情书字体";
src: url('./方正手迹.ttf');
}
/* 使用自定义字体 */
h1 {
font-family: "情书字体", sans-serif;
}
高兼容性写法：
@font-face {
font-family: "atguigu";
font-display: swap; /* 字体加载期间使用备用字体 */
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android */
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
4.2 字体图标
字体图标的优势：
| 清晰度高 | 相比图片更加清晰 |
| 灵活性高 | 更方便改变大小、颜色、风格等 |
| 兼容性好 | IE 也能支持 |
| 体积小 | 比图片文件小得多 |
使用阿里图标库：
中文 Web 字体定制：
中文字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。
可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont
📚 官方文档：@font-face – MDN
五、CSS3 变换
5.1 2D 变换
前提：二维坐标系如下图所示，X 轴向右为正，Y 轴向下为正。
5.1.1 translate 位移
/* 基础位移 */
.box {
transform: translate(100px, 50px); /* X 轴 100px，Y 轴 50px */
}
/* 单轴位移 */
.box {
transform: translateX(100px); /* 仅 X 轴位移 */
transform: translateY(50px); /* 仅 Y 轴位移 */
}
/* 百分比位移（相对于自身尺寸） */
.box {
transform: translate(-50%, -50%); /* 居中定位常用 */
}
5.1.2 rotate 旋转
/* 顺时针旋转 45 度 */
.box {
transform: rotate(45deg);
}
/* 逆时针旋转 45 度 */
.box {
transform: rotate(-45deg);
}
5.1.3 scale 缩放
/* 放大 1.5 倍 */
.box {
transform: scale(1.5);
}
/* 缩小到 0.8 倍 */
.box {
transform: scale(0.8);
}
/* 分别设置 X、Y 轴缩放 */
.box {
transform: scaleX(1.5); /* X 轴放大 */
transform: scaleY(0.8); /* Y 轴缩小 */
transform: scale(1.5, 0.8); /* 组合写法 */
}
5.1.4 skew 扭曲
/* X 轴倾斜 30 度 */
.box {
transform: skew(30deg);
}
/* 分别设置 X、Y 轴倾斜 */
.box {
transform: skewX(30deg);
transform: skewY(20deg);
transform: skew(30deg, 20deg);
}
5.1.5 变换原点
/* 设置变换的原点（默认是中心） */
.box {
transform-origin: center; /* 中心（默认） */
transform-origin: left top; /* 左上角 */
transform-origin: 50px 50px; /* 指定坐标 */
}
5.1.6 多变换组合
/* 多个变换组合（用空格分隔） */
.box {
transform: translate(100px, 50px) rotate(45deg) scale(1.2);
}
5.2 3D 变换
前提：三维坐标系，Z 轴垂直屏幕向外为正。
5.2.1 3D 位移
/* 3D 位移 */
.box {
transform: translate3d(100px, 50px, 20px);
transform: translateZ(20px); /* 仅 Z 轴位移 */
}
5.2.2 3D 旋转
/* 3D 旋转 */
.box {
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg); /* 自定义轴旋转 */
}
5.2.3 透视效果
/* 父元素设置透视 */
.container {
perspective: 1000px; /* 观察距离 */
perspective-origin: center; /* 观察点 */
}
/* 子元素 3D 变换 */
.child {
transform: rotateY(45deg);
}
📚 官方文档：CSS 变换 – MDN
六、过渡与动画
6.1 过渡 (Transition)
过渡让效果变换更具流线性、平滑性。
6.1.1 transition 属性
| transition-property | 要过渡的 CSS 属性 |
| transition-duration | 过渡持续时间 |
| transition-timing-function | 过渡时间函数 |
| transition-delay | 过渡延迟时间 |
6.1.2 时间函数
| ease | 慢-快-慢（默认值） |
| linear | 匀速 |
| ease-in | 慢-快 |
| ease-out | 快-慢 |
| ease-in-out | 慢-快-慢（比 ease 更明显） |
| cubic-bezier() | 自定义贝塞尔曲线 |
/* 基础过渡 */
.box {
transition: all 0.3s ease;
}
/* 完整写法 */
.box {
transition-property: width, height, background-color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
}
/* 简写 */
.box {
transition: width 0.5s ease-in-out 0.1s, height 0.3s ease;
}
6.1.3 实战示例
/* 按钮悬停效果 */
.button {
background-color: #409eff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #66b1ff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* 卡片悬停效果 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
6.2 动画 (Animation)
6.2.1 @keyframes 定义动画
/* 定义动画 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* 多关键帧动画 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
6.2.2 animation 属性
| animation-name | 动画名称 |
| animation-duration | 动画持续时间 |
| animation-timing-function | 动画时间函数 |
| animation-delay | 动画延迟 |
| animation-iteration-count | 动画播放次数（infinite 为无限） |
| animation-direction | 动画方向（normal、reverse、alternate） |
| animation-fill-mode | 动画填充模式（forwards、backwards、both） |
| animation-play-state | 动画播放状态（running、paused） |
/* 应用动画 */
.box {
animation: slideIn 0.5s ease forwards;
}
/* 完整写法 */
.box {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
/* 简写 */
.box {
animation: bounce 1s ease-in-out 0.2s infinite alternate both;
}
6.2.3 实战示例
/* 加载动画 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #409eff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 淡入动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
/* 脉冲动画 */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
📚 官方文档：CSS 过渡 – MDN | CSS 动画 – MDN
💡 综合实战案例
现代卡片组件
结合 CSS3 新特性，实现完整的现代卡片组件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3 现代卡片组件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 300px;
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.card-image {
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-size: cover;
background-position: center;
position: relative;
}
.card-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.9);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
color: #333;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.card-description {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 16px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-price {
font-size: 24px;
font-weight: bold;
color: #ff6b6b;
}
.card-button {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.card-button:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* 加载动画 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeInUp 0.6s ease forwards;
}
</style>
</head>
<body>
<div class="card">
<div class="card-image">
<div class="card-badge">NEW</div>
</div>
<div class="card-content">
<h3 class="card-title">现代卡片组件</h3>
<p class="card-description">结合 CSS3 渐变、阴影、过渡、动画等新特性，打造现代化 UI 组件。</p>
<div class="card-footer">
<span class="card-price">¥99</span>
<button class="card-button">立即购买</button>
</div>
</div>
</div>
</body>
</html>
❓ 常见问题 FAQ
1. box-sizing: border-box 为什么推荐使用？
解答：
| 宽度计算 | width + padding + border | width（包含 padding 和 border） |
| 布局控制 | 需要手动计算 | 更直观 |
| 响应式 | 容易溢出 | 更稳定 |
/* 推荐全局设置 */
*, *::before, *::after {
box-sizing: border-box;
}
2. transform 和 transition 有什么区别？
解答：
| 作用 | 元素变换（位移、旋转、缩放等） | 属性变化的过渡效果 |
| 触发 | 立即生效 | 需要属性变化时触发 |
| 性能 | GPU 加速 | 依赖 CSS 属性变化 |
/* 两者配合使用 */
.box {
transform: scale(1);
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1); /* 触发 transition */
}
3. 渐变兼容性如何处理？
解答：
/* 兼容写法 */
.box {
/* 旧版浏览器备用 */
background-color: #ff6b6b;
/* 标准渐变 */
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
4. @font-face 字体加载慢怎么办？
解答：
@font-face {
font-family: "CustomFont";
src: url('font.woff2') format('woff2');
font-display: swap; /* 字体加载期间使用备用字体 */
}
body {
font-family: "CustomFont", sans-serif; /* 备用字体 */
}
5. 动画性能如何优化？
解答：
| 使用 transform 和 opacity | GPU 加速，性能最好 |
| 避免动画 width/height | 会触发重排，性能差 |
| 使用 will-change | 提前告知浏览器优化 |
| 减少动画复杂度 | 关键帧越少越好 |
/* 性能优化示例 */
.optimized {
will-change: transform, opacity;
transition: transform 0.3s ease, opacity 0.3s ease;
}
📝 总结
本文系统总结了 CSS3 的核心知识点，涵盖：
知识体系
| CSS3 基础 | 私有前缀、新长度单位、盒模型增强 | ⭐⭐⭐⭐⭐ |
| 背景边框 | 背景属性升级、圆角、阴影 | ⭐⭐⭐⭐⭐ |
| 文本效果 | 文本阴影、换行、溢出、修饰 | ⭐⭐⭐⭐ |
| 渐变技术 | 线性渐变、径向渐变、重复渐变 | ⭐⭐⭐⭐⭐ |
| Web 字体 | @font-face、字体图标 | ⭐⭐⭐⭐ |
| 2D 变换 | 位移、旋转、缩放、扭曲 | ⭐⭐⭐⭐⭐ |
| 3D 变换 | 3D 位移、旋转、透视 | ⭐⭐⭐ |
| 过渡动画 | transition、animation、keyframes | ⭐⭐⭐⭐⭐ |
学习建议
CSS3 特性使用频率排行
| box-sizing: border-box | ⭐⭐⭐⭐⭐ | 必学 |
| border-radius | ⭐⭐⭐⭐⭐ | 必学 |
| box-shadow | ⭐⭐⭐⭐⭐ | 必学 |
| linear-gradient | ⭐⭐⭐⭐⭐ | 必学 |
| transform | ⭐⭐⭐⭐⭐ | 必学 |
| transition | ⭐⭐⭐⭐⭐ | 必学 |
| animation | ⭐⭐⭐⭐ | 高频 |
| @font-face | ⭐⭐⭐ | 常用 |
| text-shadow | ⭐⭐⭐ | 常用 |
| background-size: cover | ⭐⭐⭐⭐ | 高频 |
📚 参考资料
官方文档
- CSS3 浏览器前缀 – MDN
- CSS 盒模型 – MDN
- CSS 背景 – MDN
- CSS 文本 – MDN
- CSS 渐变 – MDN
- @font-face – MDN
- CSS 变换 – MDN
- CSS 过渡 – MDN
- CSS 动画 – MDN
实用工具
- Can I Use – CSS3 兼容性查询
- 阿里图标库 – Web 字体定制
- W3C CSS 工作草案
