这篇 CSS3 速查手册包含选择器、边框、背景、文字、渐变、转换、过渡、动画、Flex/Grid 布局、滤镜、响应式、变量等全套核心用法。日常开发优先使用：
flex布局、transition过渡、transform转换、animation动画、box-sizing: border-box，能高效完成 90% 页面样式需求。
前言
本文整理了CSS3 核心属性、完整语法、实战用法、兼容性，覆盖日常开发 99% 场景，可直接复制使用，适合前端新手速查、老手复习。
一、CSS3 基础与选择器
1.1 CSS3 新增长度单位
/* 相对单位 */
rem: 根元素字体大小的倍数; /* 最常用响应式单位 */
em: 父元素字体大小的倍数;
vw: 视口宽度的 1%;
vh: 视口高度的 1%;
vmin: vw/vh 中较小值;
vmax: vw/vh 中较大值;
/* 计算函数 */
width: calc(100% - 50px); /* 加减乘除运算 */
1.2 CSS3 高级选择器
/* 属性选择器 */
a[target] { } /* 包含 target 属性 */
a[href="xxx"] { } /* 精确匹配 */
a[href*="xxx"] { } /* 包含 xxx */
a[href^="xxx"] { } /* 以 xxx 开头 */
a[href$="xxx"] { } /* 以 xxx 结尾 */
/* 结构伪类 */
li:first-child {} /* 第一个子元素 */
li:last-child {} /* 最后一个子元素 */
li:nth-child(n) {} /* 第 n 个子元素 */
li:nth-child(2n) {} /* 偶数项 */
li:nth-child(2n+1) {} /* 奇数项 */
li:nth-of-type(n) {} /* 同类型第 n 个 */
li:only-child {} /* 唯一子元素 */
/* 状态伪类 */
input:disabled {}
input:checked {}
input:focus {}
div:not(.class) {} /* 排除选择器 */
二、CSS3 边框（Border）
2.1 圆角边框
/* 基础用法 */
border-radius: 50%; /* 正圆 */
border-radius: 10px; /* 统一圆角 */
border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
/* 单独设置 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
2.2 盒子阴影
/* 外阴影 */
box-shadow: 水平偏移 垂直偏移 模糊值 扩散大小 颜色 内外阴影;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
/* 内阴影 */
box-shadow: inset 0 0 10px #000;
/* 多重阴影 */
box-shadow: 2px 2px 10px red, 0 0 20px blue;
2.3 边框图片
border-image: url(border.png) 30 round;
border-image-slice: 30; /* 切割 */
border-image-repeat: round; /* 平铺 */
三、CSS3 背景（Background）
3.1 多背景图
background: url(bg1.png) left top no-repeat,
url(bg2.png) right bottom no-repeat;
3.2 背景尺寸
background-size: cover; /* 覆盖容器，可能裁剪 */
background-size: contain; /* 完整显示，可能留白 */
background-size: 100% 100%; /* 拉伸填满 */
background-size: 200px 100px; /* 固定尺寸 */
3.3 背景定位区域
background-origin: content-box; /* 从内容区开始 */
background-origin: padding-box; /* 默认 */
background-origin: border-box; /* 从边框开始 */
3.4 背景裁剪
background-clip: content-box; /* 内容区裁剪 */
background-clip: padding-box;
background-clip: border-box;
background-clip: text; /* 文字裁剪背景（需配合透明文字） */
四、CSS3 文字与字体
4.1 文字阴影
text-shadow: 水平偏移 垂直偏移 模糊值 颜色;
text-shadow: 1px 1px 2px #000;
/* 多重文字阴影 */
text-shadow: 1px 1px 2px red, 0 0 1em blue;
4.2 文字换行与溢出
/* 单行文本溢出省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 多行文本溢出省略 */
display: -webkit-box;
-webkit-line-clamp: 3; /* 行数 */
-webkit-box-orient: vertical;
overflow: hidden;
4.3 自定义字体
@font-face {
font-family: "myFont";
src: url("font.ttf") format("truetype");
}
div { font-family: myFont; }
4.4 文字特效
/* 文字描边 */
-webkit-text-stroke: 1px #000;
/* 文字渐变 */
background: linear-gradient(red, blue);
-webkit-background-clip: text;
color: transparent;
五、CSS3 渐变（Gradient）
5.1 线性渐变
/* 基础 */
background: linear-gradient(方向, 颜色1, 颜色2);
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);
/* 多色 + 色标 */
background: linear-gradient(red 0%, green 50%, blue 100%);
5.2 径向渐变
background: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2);
background: radial-gradient(circle, red, blue); /* 正圆 */
background: radial-gradient(ellipse, red, blue); /* 椭圆 */
5.3 重复渐变
background: repeating-linear-gradient(45deg, red 0, red 10px, blue 10px, blue 20px);
background: repeating-radial-gradient(circle, red, blue 20px);
六、CSS3 转换（Transform）
6.1 2D 转换
/* 位移 */
transform: translate(x, y);
transform: translateX(100px);
transform: translateY(100px);
/* 旋转 */
transform: rotate(45deg); /* 顺时针 */
/* 缩放 */
transform: scale(x, y);
transform: scale(2); /* 放大2倍 */
transform: scale(0.5); /* 缩小 */
/* 倾斜 */
transform: skew(30deg, 20deg);
/* 组合使用 */
transform: translate(100px) rotate(45deg) scale(1.5);
6.2 3D 转换
/* 父容器开启 3D 空间 */
perspective: 800px; /* 透视距离 */
transform-style: preserve-3d;
/* 3D 旋转 */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
/* 3D 位移 */
transform: translateZ(100px);
七、CSS3 过渡（Transition）
/* 基础语法 */
transition: 过渡属性 过渡时间 速度曲线 延迟时间;
/* 示例 */
div {
width: 100px;
transition: width 1s ease 0.2s;
}
div:hover { width: 200px; }
/* 所有属性过渡 */
transition: all 0.3s;
/* 速度曲线 */
ease; /* 慢-快-慢（默认） */
linear; /* 匀速 */
ease-in; /* 慢-快 */
ease-out; /* 快-慢 */
ease-in-out; /* 慢-快-慢 */
八、CSS3 动画（Animation）
8.1 关键帧定义
@keyframes 动画名称 {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
8.2 动画调用
animation: 名称 时长 速度曲线 延迟 播放次数 方向 填充模式;
/* 示例：无限循环左右摆动 */
div {
animation: move 2s linear infinite alternate;
}
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
/* 常用属性 */
animation-iteration-count: infinite; /* 无限循环 */
animation-direction: alternate; /* 往返 */
animation-fill-mode: forwards; /* 保持结束状态 */
animation-play-state: paused; /* 暂停 */
animation-play-state: running; /* 运行 */
九、CSS3 弹性布局（Flex）
9.1 父容器属性
/* 开启 flex */
display: flex;
display: inline-flex;
/* 主轴方向 */
flex-direction: row; /* 默认 左→右 */
flex-direction: row-reverse; /* 右→左 */
flex-direction: column; /* 上→下 */
flex-direction: column-reverse; /* 下→上 */
/* 换行 */
flex-wrap: nowrap; /* 默认不换行 */
flex-wrap: wrap; /* 自动换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
/* 主轴对齐 */
justify-content: flex-start; /* 默认左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 环绕间距 */
justify-content: space-evenly; /* 均匀间距 */
/* 交叉轴对齐 */
align-items: stretch; /* 默认拉伸 */
align-items: flex-start; /* 顶部 */
align-items: flex-end; /* 底部 */
align-items: center; /* 居中 */
align-items: baseline; /* 基线对齐 */
/* 多行对齐 */
align-content: flex-start;
align-content: center;
align-content: space-between;
9.2 子元素属性
/* 放大比例 */
flex-grow: 1; /* 占满剩余空间 */
/* 缩小比例 */
flex-shrink: 0; /* 不缩小 */
/* 基础尺寸 */
flex-basis: 200px;
/* 简写 */
flex: 1; /* 常用：1 1 0% */
/* 单独对齐 */
align-self: center;
/* 排序 */
order: 1;
十、CSS3 网格布局（Grid）
/* 父容器 */
display: grid;
grid-template-columns: 100px 1fr 2fr; /* 列宽 */
grid-template-rows: 100px auto; /* 行高 */
gap: 10px; /* 间距 */
justify-items: center;
align-items: center;
/* 子元素 */
grid-column: 1 / 3; /* 跨列 */
grid-row: 1 / 2; /* 跨行 */
十一、CSS3 盒模型与布局
/* 标准盒模型 */
box-sizing: content-box; /* width=内容宽度 */
/* IE 盒模型（推荐）*/
box-sizing: border-box; /* width=内容+内边距+边框 */
/* 居中 */
margin: 0 auto; /* 块级元素水平居中 */
display: flex; justify-content: center; align-items: center; /* 绝对居中 */
十二、CSS3 滤镜（Filter）
filter: none; /* 默认 */
filter: blur(5px); /* 模糊 */
filter: brightness(0.5); /* 亮度 */
filter: contrast(200%); /* 对比度 */
filter: grayscale(100%); /* 灰度 */
filter: hue-rotate(90deg); /* 色相旋转 */
filter: invert(100%); /* 反色 */
filter: opacity(50%); /* 透明度 */
filter: saturate(200%); /* 饱和度 */
filter: sepia(100%); /* 复古 */
/* 组合滤镜 */
filter: blur(2px) brightness(0.8) grayscale(50%);
十三、CSS3 透明度与混合模式
/* 元素透明（子元素继承） */
opacity: 0.5;
/* 背景透明（子元素不继承） */
background: rgba(0,0,0,0.5);
/* 混合模式 */
mix-blend-mode: multiply; /* 正片叠底 */
mix-blend-mode: screen; /* 滤色 */
mix-blend-mode: overlay; /* 叠加 */
十四、CSS3 响应式媒体查询（Media Query）
/* 移动端优先 */
@media (min-width: 768px) {
/* 平板样式 */
}
@media (min-width: 1200px) {
/* PC 样式 */
}
/* 最大宽度 */
@media (max-width: 767px) {
/* 手机样式 */
}
/* 横屏竖屏 */
@media (orientation: portrait) { /* 竖屏 */ }
@media (orientation: landscape) { /* 横屏 */ }
十五、CSS3 变量（自定义属性）
/* 定义全局变量 */
:root {
--main-color: #ff0000;
--base-size: 16px;
}
/* 使用变量 */
div {
color: var(--main-color);
font-size: var(--base-size);
}
十六、CSS3 其他常用属性
16.1 指针事件
pointer-events: none; /* 禁止点击穿透 */
pointer-events: auto; /* 恢复 */
16.2 用户选中
user-select: none; /* 禁止选中文字 */
user-select: text; /* 允许选中 */
16.3 滚动行为
scroll-behavior: smooth; /* 平滑滚动 */
16.4 隐藏滚动条
::-webkit-scrollbar { display: none; }
十七、CSS3 兼容性前缀
/* 常用浏览器前缀 */
-webkit- /* Chrome、Safari、新版 Edge */
-moz- /* Firefox */
-ms- /* IE */
-o- /* 旧版 Opera */
/* 示例 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
以上是本文的全部内容。由于水平有限，如有疏漏或错误之处请多多指正，也欢迎你在评论区写下自己的实践心得，我们一起进步。
