🎨 CSS3 属性详解手册

---

一、动画（Animation） — CSS3

用于创建关键帧动画。

属性	作用	常用值	值的意义说明	示例
@keyframes	定义动画的关键帧序列	自定义名称 + { from/to 或 % }	from 等同于 0%，to 等同于 100%，中间可用百分比定义关键帧状态	@keyframes slide { from { left: 0; } to { left: 100px; } }
animation	复合属性，设置所有动画参数	<name> <duration> <timing> <delay> <count> <direction> <state>	按顺序设置动画名、持续时间、速度曲线、延迟、循环次数、方向、状态	animation: slide 2s ease-in 0.5s infinite alternate;
animation-name	指定 @keyframes 动画名	自定义名称	必须与 @keyframes 定义的动画名称完全一致，否则动画无效	animation-name: bounce;
animation-duration	动画一次持续时间	s 或 ms（如 1s, 500ms）	s 秒，ms 毫秒。值越大动画越慢	animation-duration: 1.5s;
animation-timing-function	动画速度曲线	linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...)	linear 匀速，ease 先慢后快再慢，ease-in 先慢，ease-out 后慢	animation-timing-function: ease-out;
animation-delay	动画开始前的延迟	s / ms（可为负值）	负值：动画立即开始但跳过相应时间的帧	animation-delay: 0.3s;
animation-iteration-count	循环次数	number（如 3）、infinite	infinite 表示无限循环	animation-iteration-count: infinite;
animation-direction	是否反向播放	normal, reverse, alternate, alternate-reverse	normal 正向，reverse 反向，alternate 正向反向交替	animation-direction: alternate;
animation-play-state	控制播放状态	running（默认）, paused	paused 可暂停动画，常配合 :hover 使用	animation-play-state: paused;

✅ 完整示例：

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.box {
  width: 100px;
  height: 100px;
  background: #007bff;
  animation: pulse 1s ease-in-out infinite;
}

---

二、背景（Background） — CSS1/3

属性	作用	常用值	值的意义说明	说明
background	复合属性	所有背景属性的简写	按 color image repeat position / size attachment 顺序设置	background: #fff url(bg.jpg) no-repeat center/cover;
background-color	背景色	颜色值（#fff, rgb(), transparent）	transparent 透明色，不影响背景图	—
background-image	背景图	url(...), none	none 无背景图，url() 指定图片路径	支持多图：url(a.png), url(b.jpg)
background-repeat	图像重复方式	repeat, no-repeat, repeat-x, repeat-y	repeat 水平垂直都重复，no-repeat 不重复，repeat-x 仅水平重复	—
background-position	图像位置	left top, center, 50% 50%, 10px 20px	center 居中，50% 50% 百分比定位，10px 20px 绝对距离	—
background-attachment	是否随滚动固定	scroll（默认）, fixed, local	scroll 随内容滚动，fixed 相对视口固定，local 随元素内容滚动	fixed 常用于全屏背景
background-origin	background-position 的参考区域	border-box, padding-box（默认）, content-box	border-box 以边框左上角为原点，padding-box 以内边距左上角为原点	—
background-clip	背景绘制区域	同上，还可 text	text 配合 -webkit-background-clip: text 实现文字渐变效果	—
background-size	背景图尺寸	auto, cover（覆盖容器）, contain（完整显示）, 100px 200px	cover 等比缩放填满容器（可能裁剪），contain 完整显示图片（可能有空白）	响应式常用 cover

✅ 响应式背景示例：

.hero {
  height: 100vh;
  background: url(hero.jpg) no-repeat center/cover fixed;
  /* 等价于：
     background-image: url(hero.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed; */
}

---

三、边框与轮廓（Border & Outline） — CSS1/2/3

边框（Border）

属性	作用	常用值	值的意义说明
border	简写	width style color（如 1px solid #000）	width 边框粗细，style 边框样式，color 边框颜色
border-radius	圆角	10px, 50%（圆形）, 10px 20px（水平/垂直）	50% 当宽高相等时形成圆形，10px 20px 可设置不同水平垂直半径
box-shadow	盒子阴影	h-offset v-offset blur spread color inset 例：0 2px 5px rgba(0,0,0,0.2)	h-offset 水平偏移（正右负左），v-offset 垂直偏移（正下负上），blur 模糊半径，spread 扩展半径，inset 内阴影
border-image	用图像做边框	需配合 border-image-source, -slice, -width, -repeat 使用	用图像替代边框样式，常用于装饰性边框

轮廓（Outline）

属性	作用	说明	值的意义说明
outline	简写	不占空间，常用于聚焦样式	不占文档流空间，不影响布局
outline-offset	轮廓与边框距离	可为负值	正值 外扩，负值 内缩

✅ 圆角+阴影示例：

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px; /* 四角圆润 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 柔和阴影 */
  padding: 20px;
}

---

四、盒子模型（Box Model） — CSS1/2/3

属性	作用	常用值	值的意义说明
width / height	元素尺寸	px, %, auto, em, vw/vh	% 相对于父元素，vw/vh 相对于视口，auto 自动计算
min-width / max-width	最小/最大宽度	防止内容溢出或过小	min-width 元素不会小于该值，max-width 不会大于该值
padding	内边距	上右下左（顺时针）	padding: 10px; 四边相同，padding: 10px 20px; 上下/左右
margin	外边距	支持 auto（居中）	margin: auto; 水平居中（需有固定宽度），负值 可拉近元素
overflow	溢出处理	visible（默认）, hidden, scroll, auto	visible 溢出显示，hidden 溢出隐藏，scroll 始终显示滚动条
overflow-x / overflow-y	分方向控制溢出	—	overflow-x: hidden; overflow-y: auto; 水平隐藏垂直滚动
box-sizing	盒模型计算方式	content-box（默认）, border-box（推荐）	content-box width/height 不包含 padding 和 border，border-box 包含

✅ 推荐重置盒模型：

*, *::before, *::after {
  box-sizing: border-box; /* width/height 包含 padding 和 border */
}

---

五、弹性盒子（Flexbox） — CSS3

用于一维布局（行或列）

容器属性

属性	作用	常用值	值的意义说明
display: flex	启用 Flex 布局	—	子元素成为 flex 项目
flex-direction	主轴方向	row（默认）, row-reverse, column, column-reverse	row 水平从左到右，column 垂直从上到下
flex-wrap	是否换行	nowrap（默认）, wrap, wrap-reverse	wrap 换行，wrap-reverse 反向换行
justify-content	主轴对齐	flex-start, center, space-between, space-around	flex-start 左对齐，space-between 两端对齐（中间有空隙），space-around 均匀分布（两边有空隙）
align-items	交叉轴对齐（单行）	stretch（默认）, center, flex-start, baseline	stretch 拉伸填满容器，center 居中，baseline 基线对齐
align-content	多行交叉轴对齐	space-between, center 等（需 flex-wrap: wrap）	space-between 多行两端对齐，stretch 拉伸行间距

子项属性

属性	作用	常用值	值的意义说明
flex	简写：grow shrink basis	1 = 1 1 0%；auto = 0 1 auto	flex: 1 均分剩余空间，flex: auto 根据内容自适应
flex-grow	扩展比例	0（不扩展，默认）, 1（均分剩余空间）	数值越大 占据的剩余空间越多
flex-shrink	收缩比例	1（默认可收缩）	0 不收缩，1 可收缩
flex-basis	初始主轴尺寸	auto, 200px, 30%	auto 根据内容，0 不考虑内容大小
align-self	单独对齐	覆盖 align-items	auto 继承父容器，center 单独居中
order	排列顺序	数字	数字越小 越靠前（默认 0），可为负数

✅ 经典居中：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;
}

---

六、网格布局（Grid） — CSS3

用于二维布局（行+列）

容器属性

属性	作用	示例	值的意义说明
display: grid	启用 Grid	—	子元素成为 grid 项目
grid-template-columns	列宽定义	1fr 2fr, repeat(3, 100px), auto-fit minmax(200px, 1fr)	fr 份数单位，repeat(3, 100px) 重复3列每列100px，auto-fit 自动适配
grid-template-rows	行高定义	同上	—
gap	行列间距	10px, 1rem 2rem	gap: 10px; 行列间距相同，gap: 1rem 2rem; 行/列间距
justify-items / align-items	单元格内容对齐	start, center, stretch	stretch 拉伸填满单元格，center 居中
grid-auto-flow	自动放置策略	row（默认）, column, dense	row 按行填充，column 按列填充，dense 紧凑排列

子项属性

属性	作用	示例	值的意义说明
grid-column	跨列	1 / 3（从第1列到第3列）, span 2（跨2列）	1 / 3 从第1条线到第3条线，span 2 跨越2条线
grid-row	跨行	2 / span 2（从第2行跨2行）	—

✅ 响应式网格：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列宽，最小250px */
  gap: 16px;
}

---

七、文本（Text） — CSS1/2/3

属性	作用	常用值	值的意义说明
color	文字颜色	—	颜色值：#fff, rgb(255,255,255), rgba(255,255,255,0.5)
font-family	字体族	"Arial", sans-serif	优先使用第一个，不支持则用备选
font-size	字号	16px, 1.2em, 2rem	px 绝对大小，em 相对于父元素，rem 相对于根元素
font-weight	粗细	normal, bold, 400, 700	400 等同 normal，700 等同 bold
text-align	水平对齐	left, center, right, justify	justify 两端对齐（最后一行除外）
line-height	行高	1.5, 24px	1.5 相对于字体大小的倍数，24px 绝对值
text-decoration	装饰线	none, underline, line-through	none 无装饰，underline 下划线，line-through 删除线
text-transform	大小写	uppercase, lowercase, capitalize	uppercase 全大写，capitalize 首字母大写
letter-spacing / word-spacing	字符/单词间距	2px, -0.5px	负值 可让字符更紧凑
white-space	空白处理	normal, nowrap, pre, pre-wrap	nowrap 不换行，pre 保留空格和换行
text-overflow	溢出文本处理	ellipsis（需配合 overflow: hidden 和 white-space: nowrap）	ellipsis 显示省略号
text-shadow	文字阴影	1px 1px 2px rgba(0,0,0,0.3)	h-offset v-offset blur color

✅ 省略号截断：

.ellipsis {
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 隐藏溢出 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 200px;             /* 需要固定宽度 */
}

---

八、过渡（Transition） — CSS3

用于在状态变化时添加平滑效果。

属性	作用	示例	值的意义说明
transition	简写	property duration timing delay	按顺序设置属性、持续时间、速度曲线、延迟
transition-property	触发过渡的属性	all, width, opacity	all 所有可过渡属性，width 仅宽度变化时过渡
transition-duration	过渡时间	0.3s	0s 无过渡效果，0.3s 0.3秒完成
transition-timing-function	速度曲线	同 animation-timing-function	—
transition-delay	延迟	0.1s	0.1s 延迟0.1秒后开始过渡

✅ 悬停放大：

.btn {
  background: #007bff;
  padding: 10px 20px;
  transition: transform 0.2s ease; /* transform 属性 0.2秒 ease 曲线 */
}
.btn:hover {
  transform: scale(1.05); /* 悬停时放大1.05倍 */
}

---

九、2D/3D 变换（Transform） — CSS3

属性	作用	常用函数	值的意义说明
transform	应用变换	translate(x,y), rotate(30deg), scale(1.2), skew(10deg), matrix(...)	translate 移动，rotate 旋转（度数），scale 缩放（倍数）
transform-origin	变换原点	center（默认）, top left, 50% 100%	center 中心点，top left 左上角，50% 100% 百分比
transform-style	子元素 3D 空间	flat（默认）, preserve-3d	preserve-3d 保持3D空间（旋转卡片时使用）
perspective	3D 景深	800px（设在父容器）	值越小 透视效果越明显，值越大 越接近正交投影
backface-visibility	背面是否可见	visible（默认）, hidden（翻转卡片常用）	hidden 隐藏背面（翻转时不可见）

✅ 3D 翻转卡片：

.card {
  perspective: 1000px; /* 设置透视距离 */
  width: 200px;
  height: 300px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 保持3D空间 */
}
.card:hover .card-inner {
  transform: rotateY(180deg); /* 水平翻转 */
}
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
}
.card-back {
  transform: rotateY(180deg); /* 背面初始旋转180度 */
}

---

十、多列布局（Multi-column） — CSS3

属性	作用	示例	值的意义说明
column-count	列数	3	3 分为3列，auto 自动计算
column-width	列宽（自动调整列数）	200px	200px 每列最小200px，列数自动调整
columns	简写	200px 3	column-width column-count
column-gap	列间距	20px	20px 列与列之间20px间距
column-rule	列间线	1px solid #ccc	width style color
column-span	跨列	none, all（标题横跨所有列）	all 横跨所有列（如标题）

✅ 报纸风格：

.news {
  column-count: 3;          /* 分为3列 */
  column-gap: 20px;         /* 列间距20px */
  column-rule: 1px solid #eee; /* 列间线 */
}
.news h2 {
  column-span: all;         /* 标题横跨所有列 */
  text-align: center;
}

---

十一、用户界面（UI） — CSS3

属性	作用	常用值	值的意义说明
resize	是否可调整大小	none（默认）, both, horizontal, vertical（需 overflow: auto/scroll）	both 水平垂直都可调整，需配合滚动条
appearance	重置默认样式	none（常用于 <input>、<button>）	none 移除浏览器默认样式
cursor	鼠标指针	pointer, default, move, text, not-allowed	pointer 手型，not-allowed 禁止

✅ 自定义输入框：

input[type="range"] {
  appearance: none;           /* 移除默认样式 */
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;           /* 移除滑块默认样式 */
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

---

十二、表格（Table） — CSS2

属性	作用	常用值	值的意义说明
border-collapse	边框合并	collapse（合并）, separate（默认）	collapse 消除单元格间距，separate 保留间距
border-spacing	单元格间距（仅 separate 有效）	10px	10px 水平垂直间距都是10px
empty-cells	空单元格是否显示边框	show（默认）, hide	hide 空单元格无边框背景
caption-side	标题位置	top（默认）, bottom	top 标题在表头上方，bottom 在下方

---

⚠️ 已废弃或极少使用的属性（避免使用）

• rotation, rotation-point（未被广泛支持）
• marquee-*（跑马灯，已被淘汰）
• voice-*（语音合成，仅限特定设备）
• bookmark-*, string-set（主要用于打印/PDF）

---

✅ 最佳实践建议

1. 优先使用 flex 和 grid 布局，替代浮动和定位 hack。
2. 动画尽量用 transform 和 opacity，避免触发布局重排。
3. 使用 rem/em 适配字体，%/vw/vh 适配容器。
4. 为交互元素添加 :focus 样式，提升无障碍体验。
5. 慎用 !important，优先通过选择器权重解决样式冲突。

---

📌 此文档可作为前端开发日常参考。建议结合 MDN Web Docs 查阅最新兼容性。