CSS / CSS3 前端技术详解（完整版）——前端技术分享二

CSS / CSS3 前端技术详解（完整版）

本文为前端 CSS/CSS3 全体系技术汇总，按技术栈分类详解，包含「原理 + 用法 + 使用场景 + 可替代方案 + 优劣势 + 优化方案 + 常见问题 + 解决方案」，可直接复制保存为 .md 文件，用于博客发布、笔记整理。

一、CSS 基础认知

1. 什么是 CSS

CSS（Cascading Style Sheets）层叠样式表，用于控制 HTML 结构的样式、布局、外观、动画，实现 HTML 结构与视觉样式的分离，提升代码可维护性。

2. CSS 核心原理

• 层叠：多个样式规则作用于同一个 DOM 元素时，按优先级合并生效，优先级高的样式覆盖优先级低的样式。
• 继承：子元素默认继承父元素的部分样式（如 color、font-family、line-height 等文本相关样式），部分样式（如 margin、padding、border 等）不继承。
• 优先级：优先级从高到低依次为：!important（无穷大）> 行内样式（style 属性）> ID 选择器（#xxx）> 类/属性/伪类选择器（.xxx、[type="text"]、:hover）> 标签/伪元素选择器（div、::before）。
• 渲染规则：浏览器解析流程为：解析 HTML 生成 DOM 树 → 解析 CSS 生成 CSSOM 树 → DOM 与 CSSOM 合成渲染树（Render Tree）→ 布局（Layout，计算元素位置和尺寸）→ 绘制（Paint，将元素渲染到屏幕）。

3. CSS 引入方式（4种）

（1）行内样式

直接通过 HTML 元素的 style 属性引入，优先级最高（除 !important 外），仅作用于当前元素，不利于复用。

<div style="color: red; font-size: 16px;">行内样式示例</div>

（2）内部样式

在 HTML 的 标签内编写 CSS，作用于当前 HTML 文件，适合单页面样式编写。

<style>
  div {
    color: red;
    font-size: 16px;
  }
</style>

（3）外部样式（推荐）

将 CSS 编写在独立的 .css 文件中，通过 标签引入，可跨页面复用，是项目开发中最常用的方式。

<link rel="stylesheet" href="style.css">

（4）@import 引入

在 CSS 文件中通过 @import 引入其他 CSS 文件，属于 CSS 层面的引入，会等到当前 CSS 加载完成后再加载引入的 CSS，性能略差于 。

@import url('common.css'); /* 引入外部CSS */
@import 'reset.css'; /* 简写形式 */

4. 优劣势

优势

• 实现 HTML 结构与样式分离，代码结构清晰，易维护、易复用。
• 浏览器原生支持，无需额外编译，上手门槛低。
• 可通过层叠、继承特性，快速统一页面样式，提升开发效率。

劣势

• 原生 CSS 无变量、无嵌套、无逻辑判断，大型项目中样式冗余严重，难以维护。
• 样式优先级容易冲突，排查问题难度大。
• 原生不支持模块化，样式复用能力有限。

5. 使用场景

所有网页的样式控制，包括：文本样式（颜色、字体、大小）、布局排版（元素位置、尺寸、间距）、视觉美化（阴影、圆角、渐变）、交互动效（ hover 变化、过渡、动画）等。

6. 可替代方案

无完全替代 CSS 的技术（CSS 是浏览器原生支持的样式语言），但可通过以下工具增强 CSS 能力，解决原生 CSS 的不足：

• CSS 预处理器：Sass / SCSS、Less、Stylus（增加变量、嵌套、混合等特性）。
• CSS 工程化工具：PostCSS（自动前缀、代码压缩等）、CSS Modules（模块化）、CSS-in-JS（React 等框架中使用）。
• 原子化 CSS：Tailwind CSS、UnoCSS（通过预设类快速编写样式，减少冗余）。

二、CSS 选择器（核心基础）

1. 核心原理

通过预设的匹配规则，精准找到 HTML 中的 DOM 元素，为其应用对应的 CSS 样式，本质是“元素匹配 + 样式绑定”。

2. 常用选择器（按使用频率排序）

选择器类型	语法示例	说明
元素选择器	div {}、p {}、span {}	匹配所有对应标签的元素，优先级最低
类选择器	.box {}、.btn {}	匹配所有 class 属性为对应值的元素，可复用，优先级中等
ID 选择器	#header {}、#footer {}	匹配唯一 ID 属性为对应值的元素，不可复用，优先级高
通配符选择器	* {}	匹配页面所有元素，性能差，尽量少用
后代选择器	.box p {}	匹配 .box 元素下所有后代 p 元素（包括子、孙、曾孙等）
子元素选择器	.box > p {}	仅匹配 .box 元素下的直接子元素 p（不包含孙元素）
相邻兄弟选择器	div + p {}	匹配 div 元素后面紧邻的第一个 p 元素（同级）
属性选择器	input[type="text"] {}、[class^="btn"] {}	根据元素的属性及属性值匹配，灵活度高
伪类选择器	:hover、:active、:focus、:nth-child(2)	匹配元素的特定状态（如 hover 鼠标悬浮）或位置
伪元素选择器	::before、::after、::first-letter	创建虚拟元素（不占 DOM 位置），用于美化或补充内容

3. 优先级权重（量化计算）

优先级可通过“权重值”量化，权重值越高，样式越优先生效，具体规则：

• !important：权重无穷大（慎用，会打破正常优先级，建议仅用于紧急覆盖）。
• 行内样式（style 属性）：权重 1000。
• ID 选择器：权重 100（每个 ID 加 100）。
• 类/属性/伪类选择器：权重 10（每个加 10）。
• 标签/伪元素选择器：权重 1（每个加 1）。

示例：#header .nav > li:hover → 权重 = 100（ID） + 10（类） + 1（标签） + 10（伪类） = 121。

4. 优化方案（提升性能 + 减少冲突）

• 避免选择器嵌套过深（最多 3 层），嵌套过深会增加浏览器匹配成本，且优先级难以控制。
• 少用通配符 * 和标签选择器限定（如 div .box），通配符会匹配所有元素，标签限定会增加权重冗余。
• 不用 ID 做样式选择器（ID 用于 JS 获取元素，样式用类选择器，避免权重过高难以覆盖）。
• 避免滥用 !important，若必须使用，确保仅作用于单个样式，而非整个选择器。
• 统一选择器命名规范（如 BEM 命名法），减少样式冲突。

5. 常见问题及解决方案

问题1：样式不生效

原因：选择器写错（如类名拼写错误、嵌套关系错误）、优先级不够（被其他样式覆盖）、样式语法错误（如分号遗漏、属性拼写错误）、元素未渲染（如 display: none）。

解决：打开浏览器开发者工具（F12），切换到「Elements」→「Computed」，查看该元素的样式是否被覆盖，鼠标悬停在样式上可查看覆盖源；检查选择器语法和元素渲染状态。

问题2：优先级冲突，想要的样式被覆盖

解决：提升目标样式的优先级（如增加类选择器、调整选择器嵌套），或使用 !important 临时覆盖（不推荐长期使用）；排查并删除冗余的覆盖样式。

问题3：伪元素 ::before / ::after 不显示

原因：未设置 content 属性（伪元素必须有 content，即使值为空 content: ""）、未设置 display 属性（如 inline-block / block）。

解决：给伪元素添加 content: ""; 并设置合适的 display 属性。

三、盒模型（CSS 核心布局基础）

1. 核心原理

CSS 中，所有 HTML 元素都被视为一个「矩形盒子」，无论元素是块级还是行内，其布局都基于盒模型。盒模型由 4 个部分组成（从内到外）：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

浏览器通过计算盒模型的总尺寸（content + padding + border + margin），确定元素在页面中的位置和占用空间。

2. 两种盒模型（关键区别）

（1）标准盒模型（默认，box-sizing: content-box）

元素的 width 和 height 仅对应「内容区（content）」的尺寸，不包含 padding 和 border。

总宽度 = width + padding-left + padding-right + border-left + border-right

总高度 = height + padding-top + padding-bottom + border-top + border-bottom

.box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  /* 实际总宽度 = 200 + 20*2 + 1*2 = 242px */
}

（2）IE 盒模型（推荐，box-sizing: border-box）

元素的 width 和 height 包含「内容区（content）+ 内边距（padding）+ 边框（border）」，不包含 margin。

总宽度 = width（已包含 content + padding + border）

总高度 = height（已包含 content + padding + border）

.box {
  box-sizing: border-box; /* 推荐使用 */
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  /* 实际总宽度 = 200px（content = 200 - 20*2 - 1*2 = 158px） */
}

3. 使用场景

• 全局布局统一：项目开发中，建议全局设置 box-sizing: border-box，避免因 padding 和 border 导致元素尺寸超出预期，简化布局计算。
• 组件尺寸控制：开发 UI 组件（如按钮、卡片）时，使用 border-box 可精准控制组件的总尺寸，避免尺寸偏差。
• 响应式布局：在响应式开发中，固定元素总尺寸，通过调整 content 大小适配不同屏幕，提升布局稳定性。

4. 优化方案（全局统一配置）

项目中最常用的优化方式：全局设置所有元素（包括伪元素）为 border-box，避免单个元素单独设置导致的布局混乱。

/* 全局盒模型统一 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 可选：重置默认边距，减少浏览器差异 */
}

5. 常见问题及解决方案

问题1：给元素添加 padding 后，元素被撑大，超出父容器

原因：使用了默认的标准盒模型（content-box），padding 不包含在 width/height 中，导致总尺寸超出预期。

解决：给元素设置 box-sizing: border-box，让 padding 和 border 包含在 width/height 内。

问题2：margin 重叠（相邻元素或父子元素 margin 叠加）

原因：盒模型的 margin 重叠规则（垂直方向的 margin 会取最大值，而非相加），常见于相邻块级元素、父子元素。

解决：

• 给父元素添加 padding 或 border，打破父子 margin 重叠。
• 给父元素触发 BFC（如 overflow: hidden），隔离父子元素的 margin。
• 相邻元素：将其中一个元素改为 inline-block，或添加中间元素（如 ）。

问题3：元素 border 显示异常（如边框不显示、边框粗细不一致）

原因：border 未设置 width 或 color，或元素 display 为 inline（inline 元素垂直方向 border 可能被遮挡）。

解决：确保 border 同时设置 border-width、border-style、border-color（如 border: 1px solid #000）；inline 元素可改为 inline-block 或 block。

四、CSS 布局方案（核心重点，高频面试+实战）

CSS 布局是前端开发的核心，常用布局方案包括：标准流、float 浮动、position 定位、BFC、Flex 布局（CSS3）、Grid 布局（CSS3），以下按使用频率和实用性详解。

1. 标准流布局（默认布局）

原理

浏览器默认的布局方式，无需额外设置 CSS，元素按“块级元素垂直排列、行内元素水平排列”的规则布局。

• 块级元素（div、p、h1-h6、ul、li 等）：独占一行，宽度默认继承父容器 100%，可设置 width、height、margin、padding。
• 行内元素（span、a、img、input 等）：不独占一行，宽度由内容决定，不可设置 width、height（设置无效），仅可设置水平方向的 margin、padding。

使用场景

简单页面的基础布局，无需复杂排列（如单栏文本、简单段落），是其他布局方案的基础。

优劣势

优势：无需额外代码，浏览器原生支持，兼容性好；劣势：无法实现复杂的横向排列、嵌套布局，灵活性差。

2. float 浮动布局（传统布局方案）

原理

让元素脱离标准流，“漂浮”在父元素的左侧或右侧，其他元素会环绕该元素排列。float 仅能实现水平方向的排列（left/right），无法实现垂直方向的对齐。

用法

/* 基本用法 */
.float-left { float: left; } /* 向左浮动 */
.float-right { float: right; } /* 向右浮动 */

/* 清除浮动（关键） */
.clearfix::after {
  content: "";
  display: block;
  clear: both; /* 清除左右浮动 */
}
/* 给浮动元素的父容器添加 .clearfix 类，避免父容器高度塌陷 */

使用场景

传统项目的横向布局（如导航栏、图文环绕、多列布局），兼容低版本浏览器（如 IE8+）。

优劣势

优势：兼容性好，可实现简单横向排列；劣势：脱离标准流，容易导致父容器高度塌陷、布局错乱，难以实现垂直居中，维护成本高。

常见问题及解决方案

问题1：父容器高度塌陷（浮动元素不占父容器空间，父容器高度为 0）

解决：给父容器添加清除浮动的样式（如 clearfix 伪元素法），或触发父容器 BFC（如 overflow: hidden）。

问题2：浮动元素环绕异常（其他元素被浮动元素遮挡）

解决：给被遮挡的元素添加 clear: both;，清除浮动的影响；或调整浮动元素的 margin，避免遮挡。

问题3：浮动元素垂直对齐不一致

解决：给所有浮动元素添加 vertical-align: middle;，或统一设置相同的 margin-top，确保垂直对齐。

3. position 定位布局（精准定位方案）

原理

通过设置 position 属性，让元素脱离标准流或相对自身/父元素定位，实现精准的位置控制，常用于弹窗、导航栏、悬浮元素等。

5种定位类型（重点）

定位类型	语法	定位基准	是否脱离标准流	使用场景
static（默认）	position: static;	无定位基准，按标准流布局	否	无需定位的元素，默认状态
relative（相对定位）	position: relative;	相对于自身原来的位置（标准流中的位置）	否（仍占标准流空间）	作为 absolute 定位的父容器，或微调元素位置
absolute（绝对定位）	position: absolute;	相对于最近的非 static 父元素（relative/absolute/fixed），若无则相对于视口	是（不占标准流空间）	弹窗、下拉菜单、元素悬浮、精准定位
fixed（固定定位）	position: fixed;	相对于浏览器视口（屏幕）	是	顶部导航栏、底部版权栏、悬浮按钮、弹窗遮罩
sticky（粘性定位）	position: sticky;	滚动时，在指定位置（top/bottom）固定，未滚动时按标准流布局	半脱离（滚动到指定位置后脱离）	吸顶导航、列表标题吸顶

核心注意点

• absolute 定位的元素，必须有一个非 static 的父元素作为定位基准，否则会相对于视口定位。
• fixed 定位的元素，不受页面滚动影响，始终固定在视口的指定位置。
• sticky 定位需配合 top/bottom 等属性使用，否则无效；部分低版本浏览器（如 IE）不支持。

常见问题及解决方案

问题1：absolute 定位元素错位，不相对于父元素定位

原因：父元素未设置 position: relative/absolute/fixed（父元素为 static）。

解决：给父元素设置 position: relative;，作为 absolute 定位的基准。

问题2：fixed 定位元素在移动端滚动时抖动

原因：移动端浏览器滚动时，视口渲染机制导致 fixed 元素抖动。

解决：给 fixed 元素添加 transform: translateZ(0); 开启 GPU 加速，或使用 sticky 定位替代（适合吸顶场景）。

问题3：sticky 定位无效

原因：未设置 top/bottom 等定位属性，或父元素有 overflow: hidden;（会遮挡 sticky 元素），或父元素高度小于 sticky 元素高度。

解决：添加 top/bottom 属性（如 top: 0;），移除父元素的 overflow: hidden;，确保父元素高度大于 sticky 元素高度。

4. BFC 块级格式化上下文（布局辅助工具）

原理

BFC（Block Formatting Context）即「块级格式化上下文」，是一个独立的渲染区域，区域内的元素布局不受外部影响，同时也不会影响外部元素。

BFC 的核心作用：隔离布局，解决 margin 重叠、清除浮动、避免元素被遮挡等问题。

触发 BFC 的条件（满足任意一个即可）

• 根元素（html）。
• 元素设置 float: left/right（不为 none）。
• 元素设置 position: absolute/fixed。
• 元素设置 display: flex/grid/inline-block/table-cell。
• 元素设置 overflow: hidden/auto/scroll（不为 visible）。

使用场景

• 清除浮动：给浮动元素的父容器触发 BFC，避免父容器高度塌陷（替代 clearfix 伪元素法）。
• 解决 margin 重叠：给相邻或父子元素触发 BFC，隔离 margin，避免叠加。
• 自适应布局：实现左侧固定、右侧自适应的布局（左侧 float: left，右侧触发 BFC）。

示例（解决 margin 重叠）

/* 未触发 BFC 时，两个 div 的 margin-top 会重叠（取最大值 20px） */
.div1 { margin-top: 10px; }
.div2 { margin-top: 20px; }

/* 触发 BFC 后，margin 不重叠（总和 30px） */
.div1 { margin-top: 10px; }
.div2 { margin-top: 20px; overflow: hidden; /* 触发 BFC */ }

5. Flex 布局（CSS3，推荐使用）

原理

Flex 布局（Flexible Box，弹性盒子布局）是 CSS3 新增的一维布局方案，通过设置父容器为 flex 容器，子元素为 flex 项目，实现灵活的横向或纵向排列，支持元素的对齐、分配空间、自适应等功能。

Flex 布局的核心优势：无需脱离标准流，代码简洁，适配性强，可轻松实现垂直居中、均匀分布等传统布局难以实现的效果。

基本用法

/* 1. 设置父容器为 flex 容器 */
.flex-container {
  display: flex; /* 块级 flex 容器，独占一行 */
  /* display: inline-flex; 行内 flex 容器，不独占一行 */
  
  /* 2. 主轴方向（默认水平方向，row） */
  flex-direction: row; /* 水平从左到右（默认） */
  /* flex-direction: column; 垂直从上到下 */
  
  /* 3. 主轴对齐方式 */
  justify-content: center; /* 居中对齐（常用） */
  /* justify-content: flex-start/flex-end/space-between/space-around; */
  
  /* 4. 交叉轴对齐方式（垂直于主轴） */
  align-items: center; /* 居中对齐（常用，实现垂直居中） */
  /* align-items: flex-start/flex-end/stretch/baseline; */
  
  /* 5. 项目是否换行（默认不换行） */
  flex-wrap: wrap; /* 超出父容器时换行（常用） */
  /* flex-wrap: nowrap; 不换行（默认） */
  
  /* 6. 交叉轴换行后的对齐方式（多换行时用） */
  align-content: center;
}

/* 7. 子项目（flex 项目）属性 */
.flex-item {
  flex: 1; /* 分配剩余空间，所有项目等分（常用） */
  /* flex: 0 1 auto; 默认值（不放大、可缩小、宽度自适应） */
  
  align-self: center; /* 单独设置当前项目的交叉轴对齐方式，覆盖父容器 align-items */
  margin: 10px; /* 项目间距 */
}

使用场景（高频）

• 导航栏布局（横向均匀分布、左右对齐）。
• 卡片布局（多列自适应、均匀排列）。
• 元素居中（水平+垂直居中，最简洁的方案）。
• 表单布局（标签与输入框对齐、按钮排列）。
• 响应式布局（配合 flex-wrap: wrap，适配不同屏幕宽度）。

优劣势

优势：代码简洁、布局灵活、无需脱离标准流、支持自适应、可轻松实现垂直居中，兼容性好（IE10+ 支持，现代浏览器完全支持）。

劣势：仅支持一维布局（只能横向或纵向），无法实现复杂的二维布局（如网格布局）。

常见问题及解决方案

问题1：Flex 项目无法换行，超出父容器

原因：flex 容器默认 flex-wrap: nowrap;（不换行），项目会被压缩。

解决：给 flex 容器添加 flex-wrap: wrap;，让项目超出时换行。

问题2：Flex 项目无法垂直居中

原因：未设置父容器的 align-items 属性，或父容器没有固定高度。

解决：给父容器设置 align-items: center;，并给父容器设置固定高度（如 height: 200px;）或 flex-grow: 1; 占满父容器。

问题3：Flex 项目分配空间不均

原因：项目设置的 flex 值不一致，或项目本身有固定宽度。

解决：统一所有项目的 flex 值（如 flex: 1;），或给项目设置相同的 flex-basis（基础宽度）。

6. Grid 布局（CSS3，二维布局方案）

原理

Grid 布局（网格布局）是 CSS3 新增的二维布局方案，通过将父容器划分为“行”和“列”，形成网格，子元素可以自由放置在网格的任意单元格中，实现复杂的二维布局（既可以横向排列，也可以纵向排列）。

Grid 布局适合复杂页面布局（如后台管理系统、仪表盘、多列多行布局），代码极简，灵活性远超传统布局。

基本用法

/* 1. 设置父容器为 grid 容器 */
.grid-container {
  display: grid; /* 块级 grid 容器 */
  /* display: inline-grid; 行内 grid 容器 */
  
  /* 2. 定义列数和列宽（常用） */
  grid-template-columns: 100px 200px auto; /* 3 列，宽度分别为 100px、200px、自适应 */
  grid-template-columns: repeat(3, 1fr); /* 3 列，每列等分剩余空间（常用） */
  
  /* 3. 定义行数和行高 */
  grid-template-rows: 100px auto; /* 2 行，高度分别为 100px、自适应 */
  
  /* 4. 网格间距（行列之间的距离） */
  gap: 10px; /* 行列间距均为 10px（常用） */
  /* row-gap: 10px; 行间距 */
  /* column-gap: 10px; 列间距 */
  
  /* 5. 网格对齐方式（整体） */
  justify-content: center; /* 水平方向对齐 */
  align-content: center; /* 垂直方向对齐 */
}

/* 6. 子项目（grid 项目）属性 */
.grid-item {
  grid-column: 1 / 3; /* 跨列：从第 1 列到第 3 列（占据 2 列） */
  grid-row: 1 / 2; /* 跨行：从第 1 行到第 2 行（占据 1 行） */
  /* 简写：grid-area: 行开始 / 列开始 / 行结束 / 列结束; */
  grid-area: 1 / 1 / 2 / 3;
}

使用场景

• 复杂页面布局（如后台管理系统的侧边栏+主内容+顶部导航+底部版权栏）。
• 多列多行布局（如卡片网格、图片画廊）。
• 不规则布局（如某些单元格跨列、跨行）。

优劣势

优势：真正的二维布局，代码简洁，可实现复杂的跨行跨列布局，灵活性极高，适配性强。

劣势：兼容性略差（IE11 部分支持，现代浏览器完全支持），学习成本比 Flex 布局略高。

Flex 与 Grid 对比（重点）

• Flex：一维布局，适合横向或纵向的单一方向排列，侧重“对齐、分配空间”，代码简单，适合大部分日常布局。
• Grid：二维布局，适合多行多列的复杂布局，侧重“网格划分、单元格定位”，适合复杂页面。
• 实际开发：Flex + Grid 结合使用（如 Grid 做整体页面布局，Flex 做局部元素对齐）。

7. 布局方案总结（实战推荐）

• 简单布局（单栏、文本）：标准流。
• 横向排列、图文环绕（兼容低版本）：float 浮动。
• 精准定位（弹窗、悬浮元素）：position 定位。
• 日常布局（导航、卡片、居中）：Flex 布局（推荐）。
• 复杂页面、多行多列布局：Grid 布局（推荐）。
• 布局异常（margin 重叠、浮动塌陷）：BFC 辅助解决。

五、CSS3 新特性详解（重点，高频面试）

CSS3 是 CSS 的升级版本，新增了大量实用特性，解决了传统 CSS 的诸多痛点，以下按使用频率和实用性详解核心新特性，包含原理、用法、场景、问题及解决方案。

1. 边框相关新特性

（1）边框圆角 border-radius

原理：通过设置元素边框的圆角半径，实现圆角效果，底层是浏览器通过贝塞尔曲线绘制圆角。

/* 基本用法 */
.box {
  border-radius: 5px; /* 四个角统一圆角 */
  border-radius: 5px 10px; /* 左上/右下 5px，右上/左下 10px */
  border-radius: 5px 10px 15px 20px; /* 左上→右上→右下→左下（顺时针） */
  border-radius: 50%; /* 圆形（元素宽高相等时）/ 椭圆形（宽高不等时） */
}

使用场景：按钮、头像、卡片、弹窗等，用于美化界面，减少尖锐感。

优化方案：避免设置过大的圆角半径（如超过元素宽高的一半），否则会导致渲染性能损耗；圆角元素若有边框，建议边框颜色与背景色协调，提升视觉效果。

（2）盒子阴影 box-shadow

原理：在元素盒子周围绘制阴影，增强元素的立体感，阴影不占用 DOM 空间，属于视觉效果。

/* 语法：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色  inset（内阴影） */
.box {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 常用：轻微外阴影，增强立体感 */
  box-shadow: 0 0 10px 2px #ff0000; /* 红色扩散阴影 */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* 内阴影 */
  box-shadow: 0 2px 5px #000, 0 4px 10px #666; /* 多阴影（用逗号分隔） */
}

使用场景：卡片、按钮、弹窗、导航栏，用于增强视觉层次，区分元素与背景。

常见问题及解决方案：

• 问题：阴影过大、模糊半径过高，导致页面卡顿。
• 解决：减少模糊半径（建议不超过 20px）、减少扩散半径，避免大面积元素使用复杂阴影；可使用伪元素（::before/::after）绘制阴影，优化渲染性能。

（3）边框图片 border-image

原理：用图片替代元素的默认边框，实现自定义边框效果，适合个性化设计。

.box {
  border: 10px solid transparent; /* 必须设置边框宽度和透明色 */
  border-image: url("border.png") 30 round; /* 图片路径 + 切片大小 + 平铺方式 */
  /* border-image-slice: 30; 切片大小（可选，与上面合并） */
  /* border-image-repeat: round; 平铺方式（round 拉伸，repeat 重复） */
}

使用场景：个性化边框（如装饰性边框、节日边框），适合非通用设计场景。

2. 背景相关新特性

（1）渐变背景（linear-gradient / radial-gradient）

原理：浏览器通过算法生成渐变图像，作为元素背景，无需额外引入图片，减少请求次数，提升性能。

线性渐变（linear-gradient，常用）

/* 语法：linear-gradient(方向, 颜色1, 颜色2, ...) */
.box {
  background: linear-gradient(to right, #ff0000, #00ff00); /* 从左到右，红→绿 */
  background: linear-gradient(45deg, #ff0000, #0000ff); /* 45度角，红→蓝 */
  background: linear-gradient(to bottom right, #fff, #000); /* 从左上到右下，白→黑 */
  background: linear-gradient(to right, #ff0000 0%, #ff9900 50%, #00ff00 100%); /* 自定义渐变节点 */
}

径向渐变（radial-gradient）

/* 语法：radial-gradient(形状, 颜色1, 颜色2, ...) */
.box {
  background: radial-gradient(circle, #ff0000, #0000ff); /* 圆形渐变，红→蓝 */
  background: radial-gradient(ellipse, #fff, #000); /* 椭圆形渐变，白→黑 */
  background: radial-gradient(circle at center, #ff0000 0%, #00ff00 100%); /* 中心点渐变 */
}

使用场景：按钮背景、页面背景、卡片渐变、装饰性元素，用于提升视觉效果，减少图片依赖。

优化方案：渐变颜色不宜过多（建议不超过 3 种），避免复杂渐变导致渲染性能损耗；可结合 background-size、background-position 实现更灵活的效果。

（2）多背景图片 background-image

原理：允许给一个元素设置多个背景图片，按顺序叠加显示（先设置的在底层，后设置的在顶层）。

.box {
  background-image: url("bg1.png"), url("bg2.png"); /* 两个背景图片，bg1 在底层，bg2 在顶层 */
  background-position: center, right bottom; /* 分别设置每个背景的位置 */
  background-repeat: no-repeat, no-repeat; /* 分别设置每个背景是否重复 */
  background-size: cover, 100px 100px; /* 分别设置每个背景的大小 */
}

使用场景：复杂背景设计（如底层纹理 + 顶层装饰），无需嵌套多个元素，简化代码。

（3）背景尺寸 background-size

原理：控制背景图片的尺寸，解决传统 CSS 背景图片尺寸固定、无法适配元素大小的问题。

.box {
  background-image: url("bg.png");
  background-size: cover; /* 覆盖整个元素，可能裁剪图片（常用） */
  background-size: contain; /* 完整显示图片，可能留空白 */
  background-size: 100% 100%; /* 拉伸图片，填满元素（