发布日期: 2026-04-08

文章字数: 15.1k

阅读时长: 60 分

阅读次数:

CSS3 新增属性详解

CSS3 并非 CSS 的单一官方整体版本，而是 CSS2.1 之后，W3C 推出的一系列模块化 CSS 规范的行业统称。不同于 CSS2.1 的单一大版本模式，CSS3 将 CSS 能力拆分为选择器、背景边框、文本排版、动画等数十个独立模块，每个模块独立升级迭代，彻底打破了 CSS2.1 的能力边界，让 CSS 从简单的样式描述语言，升级为可实现复杂布局、交互、动画、工程化的核心前端技术。

本文将详细梳理 CSS3 核心新增属性、旧属性的升级变化、高频用法，以及前端开发中的最佳实践。为了帮助读者更直观地理解各种 CSS3 属性的效果，本文使用了 hexo-tag-tiy 插件创建了交互式示例，您可以直接在浏览器中查看不同设置下的元素显示效果。

关于本文的交互式示例

本文中的交互式示例使用了 hexo-tag-tiy 插件，该插件允许在 Markdown 文档中嵌入可运行的 HTML/CSS/JavaScript 代码。每个示例都包含了相关 CSS3 属性的实际效果，您可以通过鼠标悬停、点击等操作与示例进行交互，以便更好地理解属性的作用。

一、选择器增强

【CSS2.1 已有能力】

CSS2.1 仅支持基础选择器（标签、类、ID、通配符、后代、子代、相邻兄弟+）、4个基础属性选择器、5个基础伪类（:link/:visited/:hover/:active/:focus），以及单冒号伪元素（:before/:after等），选择能力非常有限。

【CSS3 核心变化&新增内容】

CSS3 在Selectors Level 3规范中对选择器进行了革命性扩展，新增了属性匹配、结构性筛选、状态匹配、逻辑匹配四大类能力，大幅降低了DOM结构依赖和CSS代码冗余。

1.1 新增属性选择器

注意：[attr]、[attr=val]、[attr~=val]、[attr|=val] 是CSS2.1 原生规范，不属于CSS3新增。

CSS3 新增3个正则匹配式属性选择器，支持模糊匹配元素属性：

[attribute^=value]：选择属性值以指定字符串开头的元素
[attribute$=value]：选择属性值以指定字符串结尾的元素
[attribute*=value]：选择属性值包含指定字符串的元素

/* 匹配所有href以https开头的a标签 */
a[href^="https"] {
  color: #2980b9;
}
/* 匹配所有src以.jpg结尾的img标签 */
img[src$=".jpg"] {
  border: 1px solid #eee;
}
/* 匹配所有class包含btn的元素 */
[class*="btn"] {
  border-radius: 4px;
}

1.2 新增结构性伪类选择器

注意：:first-child、:last-child、:only-child 是CSS2.1 已有规范，不属于CSS3新增。

CSS3 新增了基于元素位置、类型、结构的精准筛选能力，无需给元素加额外类名即可精准匹配：

基础序号匹配：:nth-child(n)、:nth-last-child(n)，匹配父元素下所有子元素中的第n个/倒数第n个，不区分元素类型
同类型序号匹配：:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type，仅匹配父元素下同标签类型的子元素
空元素匹配：:empty，匹配没有任何子节点（包括文本节点、空格、换行、注释）的元素
根元素匹配：:root，匹配文档根元素（html标签），优先级高于html选择器，是CSS变量定义的核心容器
锚点匹配：:target，匹配URL锚点指向的元素，用于实现锚点导航、纯CSS弹窗等效果

核心补充：nth 系列匹配规则

元素序号从1开始，表达式中的n是从0开始递增的整数（n=0,1,2,3…）
高频用法：
- :nth-child(2n) / :nth-child(even)：匹配偶数子元素
- :nth-child(2n+1) / :nth-child(odd)：匹配奇数子元素
- :nth-child(n+3)：匹配第3个及之后的所有子元素
- :nth-child(-n+3)：匹配前3个子元素

核心区别：:nth-child vs :nth-of-type

选择器	匹配规则	适用场景
`:nth-child(n)`	父元素下所有子元素的第n个，不区分标签类型	子元素标签统一的场景（如列表、纯布局容器）
`:nth-of-type(n)`	父元素下同标签类型子元素的第n个，忽略其他标签	子元素标签混杂的场景（如标题+段落混合的内容区）

1.3 新增状态伪类选择器

注意：:hover、:active、:focus 是CSS2.1 已有规范，不属于CSS3新增。

CSS3 新增了表单元素、交互元素的状态匹配能力，无需JS即可实现表单验证、状态反馈等效果：

基础表单状态：:enabled、:disabled、:checked、:indeterminate（匹配单选/复选框的不确定状态）
表单验证状态：:valid（验证通过）、:invalid（验证失败）、:in-range（数值在有效范围）、:out-of-range（数值超出范围）
表单必填状态：:required（必填项）、:optional（可选项）

1.4 新增逻辑与兄弟选择器

否定伪类：:not(selector)，匹配不满足指定选择器的元素，支持链式调用，是CSS3最高频的选择器之一

/* 匹配所有没有btn类的button标签 */
button:not(.btn) {
  padding: 4px 8px;
}
/* 匹配除了第一个之外的所有子元素 */
.item:not(:first-child) {
  margin-top: 10px;
}

通用兄弟选择器：~，匹配当前元素之后所有同级兄弟元素，CSS2仅支持相邻兄弟选择器+（仅匹配紧跟的下一个兄弟元素）

1.5 伪元素规范升级

CSS3 明确区分了伪类和伪元素，伪元素统一使用双冒号语法（::），与单冒号的伪类做语义区分：

CSS2 单冒号写法：:before、:after、:first-line、:first-letter
CSS3 标准双冒号写法：::before、::after、::first-line、::first-letter
新增伪元素：::selection，匹配用户鼠标选中的文本内容，可自定义选中文本的样式

/* 自定义选中文本样式 */
::selection {
  background-color: #3498db;
  color: #fff;
}

二、盒子属性升级

【CSS2.1 已有能力】

CSS2.1 仅定义了标准W3C盒模型（content-box），无官方的盒模型切换能力，仅IE6/7怪异模式支持border-box；无原生的元素缩放、阴影、透明度控制，只能靠hack和背景图实现。

【CSS3 核心变化&新增内容】

CSS3 对盒模型进行了全面标准化升级，解决了CSS2中宽度计算、视觉效果、交互控制的核心痛点，新增了盒模型切换、元素缩放、阴影、透明度等核心能力。

2.1 box-sizing 盒模型标准化

CSS3 在CSS Basic User Interface Module Level 3中正式标准化了box-sizing属性，彻底解决了CSS2中盒模型宽度计算的痛点，允许开发者自由切换盒模型类型。

可选值	含义	适用场景
`content-box`	width/height仅设置内容区大小，padding和border会向外撑开盒子（W3C标准盒模型，默认值）	固定尺寸、无需精确控制总宽高的场景
`border-box`	width/height设置的是盒子总大小，padding和border会向内挤压内容区（怪异盒模型）	响应式布局、精确控制元素总尺寸，现代前端开发推荐全局设置

/* 现代前端全局最佳实践 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2.2 resize 元素尺寸缩放

CSS3 新增resize属性，允许用户手动调整元素的尺寸，无需JS实现。

生效前提：元素的overflow属性不能为默认值visible，必须设置为auto/scroll/hidden
生效范围：仅对块级元素、替换元素（textarea、img等）生效，行内元素无法使用

可选值	含义
`none`	不允许用户调整大小（默认值）
`both`	允许同时调整宽度和高度
`horizontal`	仅允许调整宽度
`vertical`	仅允许调整高度

2.3 box-shadow 盒子阴影

CSS3 在Backgrounds and Borders Level 3中新增box-shadow属性，无需背景图即可为元素添加多层阴影效果，是CSS3最高频的视觉属性之一。

核心特性：

阴影不占据文档流空间，不会影响元素布局，也不会触发滚动条
支持多层阴影，先写的阴影在最上层，后写的依次在下层
支持外阴影、内阴影，可自定义偏移、模糊、扩散范围

语法：

1	box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色 inset;

参数	说明
水平偏移/垂直偏移	必填，阴影的偏移量，支持负值
模糊半径	可选，阴影的模糊程度，值越大越模糊
扩散半径	可选，阴影的外延/内缩大小，正值扩大，负值缩小
颜色	可选，阴影颜色，默认继承当前元素的color值
inset	可选，添加后变为内阴影，默认是外阴影

高频用法：

/* 卡片双层柔和阴影（现代UI推荐） */
.card {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.08);
}
/* 内阴影效果 */
.input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

2.4 opacity 元素透明度

CSS3 在Color Module Level 3中新增标准opacity属性，替代了CSS2中IE私有的filter:alpha(opacity=xx)，实现了全浏览器兼容的元素透明度控制。

核心特性：

取值范围0-1，0为完全透明，1为完全不透明
不为1的元素会创建新的层叠上下文
即使opacity: 0，元素依然占据文档流，且能响应鼠标事件（与visibility: hidden一致，与display: none完全不同）

核心区别：opacity vs rgba

特性	opacity	rgba
作用范围	作用于整个元素（包括内容、子元素、边框、背景）	仅作用于当前颜色，不影响元素其他属性
继承特性	透明效果会被子元素继承，且子元素无法通过更高的opacity值覆盖	不会被子元素继承，仅当前设置的颜色生效
适用场景	整个元素的透明隐藏、淡入淡出动画	半透明背景、文字、边框，不影响子元素

2.5 新增盒模型相关能力

overflow-x/overflow-y：CSS3新增，分别控制元素水平/垂直方向的溢出行为，CSS2仅支持统一设置overflow
outline-offset：CSS3新增，设置轮廓与边框之间的距离，CSS2仅支持outline基础属性，无偏移控制；outline不占据文档流，不会改变元素尺寸，高频用于聚焦态样式
1
2
3
4
5
/* 按钮聚焦态，不影响布局 */
button:focus-visible {
outline: 2px solid #3498db;
outline-offset: 2px;
}
max-content/min-content/fit-content：CSS3新增宽度值，支持基于内容动态计算元素尺寸，彻底解决了CSS2中内容宽度适配的痛点

三、CSS3 颜色系统升级

【CSS2.1 已有能力】

CSS2.1 仅支持颜色关键字、16进制色、rgb()颜色模式，无原生透明度支持，仅能通过IE私有滤镜实现半透明效果，颜色调整能力极弱。

【CSS3 核心变化&新增内容】

CSS3 在Color Module Level 3中对颜色系统进行了全面升级，新增了透明度支持、更直观的颜色调整模式，以及多个实用颜色关键字，是主题开发、视觉效果实现的核心基础。

3.1 rgba() 带透明度的RGB颜色

rgba() 在RGB颜色基础上新增了Alpha透明度通道，是CSS3最核心的颜色升级，解决了CSS2中无法实现半透明颜色的痛点。

语法：

1	rgba(红(0-255), 绿(0-255), 蓝(0-255), 透明度(0-1));

核心特性：

透明度0=完全透明，1=完全不透明
仅作用于当前设置的颜色，不会被子元素继承
可用于所有支持颜色的属性（背景、文字、边框、阴影等）

/* 半透明背景，不影响文字 */
.card {
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}

3.2 hsla() 直观的色相颜色模式

hsla() 使用「色相、饱和度、亮度、透明度」四个维度定义颜色，相比rgb()更适合直观调整颜色，是主题开发、同色系配色的首选方案。

语法：

1	hsla(色相(0-360deg), 饱和度(0-100%), 亮度(0-100%), 透明度(0-1));

参数说明：

色相：色轮上的角度，0=红、120=绿、240=蓝
饱和度：颜色的鲜艳程度，0%=灰度，100%=全彩
亮度：颜色的明暗程度，0%=纯黑，100%=纯白
透明度：同rgba的Alpha通道

核心优势：

仅需调整色相值，即可快速切换主题色
固定色相，仅调整饱和度/亮度，即可快速生成同色系的深浅色，无需复杂的色值计算

/* 主题色变量，仅需修改色相即可切换主题 */
:root {
  --primary-hue: 210deg; /* 蓝色主题 */
  --primary-color: hsla(var(--primary-hue), 100%, 50%, 1);
  --primary-light: hsla(var(--primary-hue), 100%, 70%, 0.8);
  --primary-dark: hsla(var(--primary-hue), 100%, 30%, 1);
}
/* 红色主题仅需修改一行 */
.theme-red {
  --primary-hue: 0deg;
}

3.3 新增核心颜色关键字与特性

currentColor：CSS3新增关键字，代表当前元素的color属性值，可用于所有需要设置颜色的属性，实现样式联动
1
2
3
4
5
/* 边框颜色自动跟随文字颜色 */
.tag {
color: #3498db;
border: 1px solid currentColor;
}
transparent：CSS3中完成标准化，可用于所有颜色属性，CSS2中仅能用于背景属性
新增hwb()、lab()、lch()等高级颜色模式（CSS Color Level 4扩展，主流浏览器已支持），支持更精准的广色域颜色控制

四、背景属性全面升级

【CSS2.1 已有能力】

CSS2.1 仅支持单背景图，仅能设置background-image、background-position、background-repeat、background-color、background-attachment五个基础属性，无法控制背景图的原点、裁剪、尺寸，渐变效果只能靠背景图实现。

【CSS3 核心变化&新增内容】

CSS3 在Backgrounds and Borders Level 3中对背景系统进行了革命性升级，新增了背景原点、裁剪、尺寸控制，支持多背景图、原生渐变背景，彻底摆脱了对背景图片的依赖。

4.1 background-origin 背景图原点控制

CSS3 新增background-origin属性，设置背景图的定位原点，解决了CSS2中背景图只能从padding区域开始定位的限制。

可选值	含义
`padding-box`	背景图从padding区域开始显示（默认值）
`border-box`	背景图从border区域开始显示
`content-box`	背景图从content内容区域开始显示

4.2 background-clip 背景裁剪区域控制

CSS3 新增background-clip属性，设置背景的向外裁剪区域，控制背景最终显示的范围。

可选值	含义
`border-box`	从border区域开始向外裁剪背景（默认值），背景会延伸到边框下方
`padding-box`	从padding区域开始向外裁剪背景，边框区域无背景
`content-box`	从content区域开始向外裁剪背景，仅内容区显示背景
`text`	背景仅呈现在文字上，实现渐变文字效果（Backgrounds Level 4扩展，主流浏览器已支持）

渐变文字核心用法（必踩坑提醒）：
使用background-clip: text时，必须配合color: transparent，否则文字颜色会直接覆盖背景，同时需要添加-webkit-前缀兼容低版本浏览器。

.gradient-text {
  background: linear-gradient(45deg, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 核心必填，否则无效果 */
}

4.3 background-size 背景图尺寸控制

CSS3 新增background-size属性，可自由控制背景图的尺寸、缩放模式，解决了CSS2中背景图只能使用原始尺寸的痛点。

核心取值：

固定尺寸/百分比：background-size: 300px 200px; / background-size: 100% 100%;，分别设置宽高，不允许负值
auto：背景图原始尺寸（默认值），单方向设置时，另一方向自动按比例缩放
contain：等比缩放背景图，确保图片完整包含在容器内，不会被裁剪，可能出现留白
cover：等比缩放背景图，确保完全覆盖容器，图片可能被裁剪，无留白，是响应式背景图的首选

/* 响应式背景图，全覆盖无变形 */
.banner {
  background: url(banner.jpg) no-repeat center center;
  background-size: cover;
}

4.4 多背景图支持

CSS3 允许一个元素设置多个背景图片，无需嵌套多个容器，大幅简化了HTML结构。

层级规则：先写的背景图在最上层，后写的在最下层，背景色永远在最底层
每个背景图的定位、重复模式可单独设置，用逗号分隔

/* 四角装饰背景，无需嵌套容器 */
.decor-box {
  background:
    url(lt.png) no-repeat left top,
    url(rt.png) no-repeat right top,
    url(lb.png) no-repeat left bottom,
    url(rb.png) no-repeat right bottom,
    #fff; /* 背景色在最底层 */
}

4.5 原生渐变背景

CSS3 新增渐变类型，将渐变作为<image>数据类型，可直接用于background-image属性，无需任何图片，即可实现复杂的渐变效果。

4.5.1 线性渐变 linear-gradient

/* 基础从上到下渐变 */
background: linear-gradient(red, blue);
/* 指定方向渐变 */
background: linear-gradient(to right, red, blue); /* 从左到右 */
background: linear-gradient(45deg, red, blue); /* 45度角 */
/* 多色标渐变 */
background: linear-gradient(
  to right,
  red 0%,
  orange 25%,
  yellow 50%,
  green 75%,
  blue 100%
);

4.5.2 径向渐变 radial-gradient

/* 基础中心径向渐变 */
background: radial-gradient(red, blue);
/* 指定形状、位置的渐变 */
background: radial-gradient(circle at top left, red, blue); /* 左上角圆形渐变 */
background: radial-gradient(
  ellipse at center,
  red 30%,
  blue 70%
); /* 中心椭圆渐变 */

4.5.3 重复渐变

CSS3 新增重复渐变函数，可实现条纹、网格等重复图案，无需平铺背景图。

/* 45度条纹背景 */
.stripe-bg {
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}
/* 圆点网格背景 */
.dot-bg {
  background: repeating-radial-gradient(
    circle,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

4.6 其他背景升级

background-attachment: local：CSS3新增值，背景随元素内容滚动，CSS2仅支持scroll（随元素滚动，不随内容滚动）和fixed（固定在视口）
背景属性简写升级：CSS3支持在background简写属性中包含origin、clip、size等新增子属性，语法更简洁

五、边框属性升级

【CSS2.1 已有能力】

CSS2.1 仅支持纯色、常规线型的边框，圆角、图片边框只能靠背景图拼接、嵌套容器实现，开发成本极高。

【CSS3 核心变化&新增内容】

CSS3 在Backgrounds and Borders Level 3中新增了圆角、图片边框能力，彻底解决了CSS2中边框样式的限制，是UI开发的核心基础。

5.1 border-radius 圆角边框

CSS3 新增border-radius属性，无需背景图即可实现任意圆角效果，是CSS3最高频的属性之一。

核心语法：

/* 四个角统一圆角 */
border-radius: 10px;
/* 分别设置四个角：左上 右上 右下 左下（顺时针） */
border-radius: 10px 20px 30px 40px;
/* 单独设置单个角 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

核心规则：

百分比值是相对于元素的宽度和高度计算的，只有元素宽高相等时，50%才会生成正圆，宽高不等时为椭圆

支持椭圆角设置：border-radius: 水平半径 / 垂直半径;，可实现不规则圆角

/* 椭圆圆角 */
.ellipse-box {
  border-radius: 50% / 20%;
}
/* 胶囊按钮 */
.capsule-btn {
  border-radius: 999px;
}

5.2 border-image 图片边框

CSS3 新增border-image属性，可使用图片作为元素边框，实现复杂的装饰边框效果，无需嵌套容器。

核心语法：

1	border-image: 图片源切片大小边框宽度外延重复方式;

核心子属性说明：

子属性	说明
`border-image-source`	边框图片地址，必填
`border-image-slice`	图片切片规则，将图片切割为上、右、下、左、中9个区域，4个角对应边框4角，4条边对应边框4边；支持数值、百分比，`fill`关键字可保留中间区域作为背景
`border-image-width`	边框图片的宽度
`border-image-outset`	边框图片向外延伸的距离
`border-image-repeat`	边框图片的重复方式：`stretch`(拉伸，默认)、`repeat`(重复)、`round`(平铺)

生效前提：元素必须设置border属性，且边框宽度不能为0，颜色建议设为transparent。

/* 图片边框示例 */
.decor-border {
  border: 20px solid transparent;
  border-image: url(border.png) 30 round;
}

六、文本属性升级

【CSS2.1 已有能力】

CSS2.1 仅支持基础的文本对齐、换行、装饰属性，文本阴影、溢出省略、自定义换行规则均无原生支持，只能靠JS和hack实现。

【CSS3 核心变化&新增内容】

CSS3 在Text Module Level 3、Text Decoration Module Level 3中对文本属性进行了全面升级，新增了文本阴影、溢出省略、自定义换行、装饰线升级等能力，同时新增了自定义字体支持，彻底解决了网页字体的限制。

6.1 @font-face 自定义字体

CSS3 在Fonts Module Level 3中正式标准化了@font-face规则，允许开发者引入自定义字体，摆脱了对系统字体的依赖，是网页设计的革命性升级。

核心用法：

/* 定义自定义字体 */
@font-face {
  font-family: "CustomFont"; /* 字体名称，自定义 */
  src:
    url("custom-font.woff2") format("woff2"),
    /* 优先使用高兼容性格式 */ url("custom-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 避免字体加载期间文字不可见，最佳实践 */
}
/* 使用自定义字体 */
body {
  font-family: "CustomFont", sans-serif;
}

6.2 text-shadow 文本阴影

CSS3 重新标准化了text-shadow属性（CSS2有草案但无浏览器实现），可为文本添加阴影、发光、描边等效果，无需图片和JS。

语法：

1	text-shadow: 水平偏移垂直偏移模糊半径颜色;

支持多层阴影，先写的在最上层，可实现复杂的文字特效
颜色可选，默认继承当前文字的color值

/* 文字发光效果 */
.glow-text {
  text-shadow: 0 0 8px #3498db;
}
/* 文字浮雕效果 */
.emboss-text {
  text-shadow:
    1px 1px 1px #000,
    2px 2px 2px #333;
}

6.3 text-overflow 文本溢出省略

CSS3 新增text-overflow属性，可设置文本溢出时的呈现模式，实现单行/多行文本溢出省略效果，是前端开发最高频的文本属性之一。

可选值	含义
`clip`	直接裁切溢出的文本（默认值）
`ellipsis`	溢出的文本替换为省略号`…`

核心生效前提：

单行省略：必须同时设置overflow: hidden（非visible值）、white-space: nowrap（强制不换行）
多行省略：基于WebKit内核的扩展规范，主流浏览器均已支持

可直接复制的最佳实践：

/* 单行文本溢出省略 */
.single-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多行文本溢出省略，-webkit-line-clamp控制行数 */
.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

坑点提醒：-webkit-box-orient: vertical 会被CSS压缩工具（如cssnano）默认删除，必须添加注释禁用压缩，否则样式失效。

6.4 文本换行规则升级

CSS3 新增了多个换行控制属性，解决了CSS2中英文长单词、CJK字符换行的痛点。

属性	版本归属	核心作用	高频取值
`white-space`	CSS2已有，CSS3无修改	控制空白符和基础换行规则	`normal`/`nowrap`/`pre`/`pre-wrap`/`pre-line`
`word-break`	CSS3新增	控制单词内的断行规则	`normal`（默认）/`break-all`（任意字符断行）/`keep-all`（不允许单词内断行）
`overflow-wrap`	CSS3新增，前身是IE私有的`word-wrap`	仅当长单词整行放不下时，才允许单词内断行	`normal`/`break-word`（推荐）

核心区别：word-break: break-all vs overflow-wrap: break-word

word-break: break-all：最大化填充容器，无论单词是否能放下一行，都允许在任意字符间断行，适合英文内容极少的中文场景
overflow-wrap: break-word：不破坏正常的单词换行规则，仅当长单词整行放不下时才断行，是英文混合场景的推荐方案

6.5 text-decoration 文本装饰升级

CSS2 中text-decoration仅为单属性，仅支持设置装饰线的位置；CSS3 将其升级为复合属性，可分别控制装饰线的位置、形状、颜色、粗细。

复合语法：

1	text-decoration: 线条位置线条形状线条颜色线条粗细;

核心子属性：

text-decoration-line：装饰线位置，支持多个值，可选none/underline/overline/line-through
text-decoration-style：装饰线形状，CSS3新增，可选solid(实线，默认)/double(双线)/dotted(点状)/dashed(虚线)/wavy(波浪线)
text-decoration-color：装饰线颜色，CSS3新增，可与文字颜色不同
text-decoration-thickness：装饰线粗细，CSS3扩展新增

/* 红色波浪下划线，常用于错误提示 */
.error-text {
  text-decoration: underline wavy #ff0000;
}

6.6 其他新增文本属性

text-align-last：CSS3新增，设置块元素最后一行文本的对齐方式，解决了CSS2中两端对齐最后一行无法左对齐的痛点
hyphens：CSS3新增，控制英文单词的自动连字符，优化长单词的换行效果
tab-size：CSS3新增，控制制表符\t的显示宽度，优化代码块的展示效果

七、transform 2D/3D变换

【CSS2.1 已有能力】

CSS2.1 无原生的元素变换能力，元素的平移、旋转、缩放、倾斜只能靠JS计算、修改margin/position实现，会触发重排，性能极差，无法实现3D效果。

【CSS3 核心变化&新增内容】

CSS3 在Transforms Module中新增了transform属性，支持2D/3D变换，可在不影响文档流的情况下，对元素进行平移、旋转、缩放、倾斜等操作，触发GPU硬件加速，性能远超CSS2的实现方式，是CSS动画、交互效果的核心基础。

7.1 核心特性

变换元素不占据文档流，不会影响其他元素的布局
基于合成层执行，不会触发重排（回流），仅触发GPU合成，动画性能最优
支持2D/3D变换，可实现复杂的3D视觉效果
变换原点可自由设置，默认是元素中心

7.2 2D变换函数

函数	作用	示例
`translate(x, y)`	元素平移，x为水平位移，y为垂直位移，支持px、百分比等单位	`transform: translate(100px, 50px);`
`translateX(x)` / `translateY(y)`	单方向平移	`transform: translateX(100px);`
`rotate(angle)`	元素旋转，正值顺时针，负值逆时针，单位deg	`transform: rotate(45deg);`
`scale(x, y)`	元素缩放，x为水平缩放比例，y为垂直缩放比例，1为原始大小	`transform: scale(1.5);`（等比放大1.5倍）
`scaleX(x)` / `scaleY(y)`	单方向缩放	`transform: scaleX(0.8);`
`skew(x-angle, y-angle)`	元素倾斜，单位deg	`transform: skew(20deg, 10deg);`
`matrix()`	矩阵变换，可实现所有2D变换效果，适合复杂的自定义变换	-

/* 多个变换组合，空格分隔 */
.transform-box {
  transform: translate(100px, 50px) rotate(45deg) scale(1.2);
}

7.3 3D变换函数

CSS3 新增3D变换能力，配合透视、3D空间保留属性，可实现立体翻转、3D旋转等效果。

核心函数	作用
`translate3d(x, y, z)`	3D平移，z为深度位移，正值向用户靠近，负值远离
`rotate3d(x, y, z, angle)`	3D旋转，x/y/z为旋转轴向量，angle为旋转角度
`rotateX(angle)` / `rotateY(angle)` / `rotateZ(angle)`	绕单轴3D旋转
`scale3d(x, y, z)`	3D缩放

3D变换核心配套属性：

perspective：设置3D透视距离，值越小，透视效果越强，近大远小越明显，需设置在变换元素的父容器上
perspective-origin：设置透视的原点，默认是元素中心
transform-style: preserve-3d：保留子元素的3D空间关系，需设置在父容器上，否则子元素无法呈现3D效果
backface-visibility：设置元素背面是否可见，可选visible/hidden，常用于翻转卡片效果，隐藏背面内容

/* 3D翻转卡片示例 */
.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}
.card-wrapper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card-container:hover .card-wrapper {
  transform: rotateY(180deg);
}
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

7.4 变换原点控制

CSS3 新增transform-origin属性，设置变换的基准原点，默认值为center center（元素中心），支持方位词、像素、百分比。

/* 以左上角为原点旋转 */
.box {
  transform-origin: left top;
  transform: rotate(45deg);
}

八、过渡与动画

【CSS2.1 已有能力】

CSS2.1 无原生的动画和过渡能力，元素样式变化是瞬时的，动画只能靠JS定时器实现，性能差、代码复杂，无法实现流畅的动效。

【CSS3 核心变化&新增内容】

CSS3 新增了transition过渡和animation关键帧动画两大核心能力，无需JS即可实现流畅的样式过渡和复杂的循环动画，是现代前端动效的核心基础。

8.1 transition 平滑过渡

CSS3 在Transitions Module中新增transition属性，可实现元素从一种样式到另一种样式的平滑过渡，常用于hover、聚焦、点击等交互态的动效。

核心语法：

1	transition: 过渡属性过渡时长缓动函数延迟时间;

核心子属性：

子属性	说明	注意事项
`transition-property`	要过渡的CSS属性，默认`all`	禁止使用`all`，会监听所有属性变化，引发不必要的重绘，影响性能，推荐仅指定需要过渡的属性
`transition-duration`	过渡时长，单位s/ms	必填属性，默认值为0，无过渡效果
`transition-timing-function`	过渡的缓动函数，控制速度变化	默认`ease`
`transition-delay`	过渡开始前的延迟时间，单位s/ms	默认0

最佳实践：

/* 仅指定需要过渡的属性，性能最优 */
.button {
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

8.2 animation 关键帧动画

CSS3 在Animations Module中新增@keyframes规则和animation属性，可定义多阶段的关键帧动画，实现复杂的循环、往返、自定义动画效果，无需JS。

8.2.1 定义动画

使用@keyframes定义动画的关键帧，支持from/to关键字，或百分比进度：

/* 淡入上移动画 */
@keyframes fadeInUp {
  from {
    /* 等同于 0% */
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    /* 等同于 100% */
    opacity: 1;
    transform: translateY(0);
  }
}
/* 多阶段呼吸动画 */
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

8.2.2 应用动画

使用animation属性将定义好的动画应用到元素上，复合语法如下：

1	animation: 动画名称时长缓动函数延迟循环次数播放方向结束状态播放状态;

核心子属性说明：

子属性	说明	高频取值
`animation-name`	@keyframes定义的动画名称	必填
`animation-duration`	动画单次循环的时长，单位s/ms	必填，默认0
`animation-timing-function`	动画的缓动函数	同transition，默认`ease`
`animation-delay`	动画开始前的延迟时间	默认0
`animation-iteration-count`	动画循环次数	数字，`infinite`无限循环
`animation-direction`	动画播放方向	`normal`(默认)/`alternate`(往返播放)/`reverse`(反向播放)
`animation-fill-mode`	动画结束后的状态	`none`(默认)/`forwards`(停在结束帧)/`backwards`(延迟期间应用起始帧)/`both`(同时包含forwards和backwards)
`animation-play-state`	动画播放状态	`running`(播放，默认)/`paused`(暂停)

高频用法：

/* 应用淡入上移动画，播放1次，结束后停在最终状态 */
.element {
  animation: fadeInUp 0.8s ease-in-out 0s 1 normal forwards;
}
/* 无限循环呼吸动画 */
.breath-box {
  animation: breathe 2s ease-in-out infinite;
}

8.2.3 缓动函数与步进动画

CSS3 提供了丰富的缓动函数，控制动画的速度变化，同时支持steps()步进函数，实现逐帧动画。

常用缓动函数：

函数	效果	适用场景
`ease`	先快后慢（默认）	常规hover、入场动画
`linear`	匀速	循环旋转、进度条动画
`ease-in`	先慢后快（渐入）	离场动画、元素消失
`ease-out`	先快后慢（渐出）	入场动画、元素出现
`ease-in-out`	慢-快-慢（渐入渐出）	往返动画、平滑过渡
`cubic-bezier(n,n,n,n)`	自定义贝塞尔曲线	个性化动效、弹性动画

steps() 步进动画：
用于创建逐帧动画，完美适配精灵图动画，语法如下：

1	animation-timing-function: steps(步数, 方向);

步数：动画拆分的阶段数量
方向：start（每阶段开始时切换状态）/end（每阶段结束时切换状态，默认）

精灵图动画最佳实践：

/* 8帧精灵图逐帧动画 */
.sprite-animation {
  width: 100px;
  height: 100px;
  background: url(sprite.png) no-repeat;
  animation: spritePlay 1s steps(8) infinite;
}
@keyframes spritePlay {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -800px 0;
  } /* 8帧 × 100px宽度 */
}

8.3 动画性能最佳实践

优先使用GPU加速属性：仅使用transform和opacity做动画，这两个属性在合成层执行，不触发重排，性能最优；避免使用width/height/margin/top等会触发重排的属性
合理使用硬件加速：避免滥用transform: translateZ(0)等hack，推荐使用will-change提前告知浏览器需要优化的属性，同时禁止滥用will-change，否则会导致内存占用过高
1
2
3
4
/* 提示浏览器元素即将发生变换，提前优化 */
.animated-element {
will-change: transform, opacity;
}
控制动画时长与复杂度：常规交互动画时长控制在300-600ms，避免过长；减少同时执行的复杂动画数量，避免页面卡顿
避免过度使用模糊与阴影：blur()滤镜、多层阴影动画会大幅增加GPU渲染压力，非必要不做动画

九、Flexbox 弹性布局

【CSS2.1 已有能力】

CSS2.1 仅支持浮动、定位、inline-block三种布局方式，实现垂直居中、等高布局、自适应分布、剩余空间分配需要大量hack，代码冗余、兼容性差、维护成本极高。

【CSS3 核心变化&新增内容】

CSS3 在Flexible Box Layout Module Level 1中新增了Flexbox一维布局模型，专门为线性布局设计，彻底解决了CSS2布局的核心痛点，实现了元素的对齐、分布、空间分配的精准控制，是现代前端开发的首选布局方案。

9.1 核心概念

Flex容器：设置display: flex/display: inline-flex的父元素，开启弹性布局
Flex项目：Flex容器内的直接子元素，自动成为弹性项目，不受float、vertical-align等属性影响
主轴：Flex项目排列的主要方向，由flex-direction控制
交叉轴：与主轴垂直的方向，对齐方式由align-items控制

9.2 Flex容器属性

.flex-container {
  /* 开启弹性布局 */
  display: flex; /* 块级容器 */
  display: inline-flex; /* 行内块容器 */

  /* 1. 主轴方向 */
  flex-direction: row; /* 水平从左到右（默认） */
  flex-direction: row-reverse; /* 水平从右到左 */
  flex-direction: column; /* 垂直从上到下 */
  flex-direction: column-reverse; /* 垂直从下到上 */

  /* 2. 换行方式 */
  flex-wrap: nowrap; /* 不换行，强制压缩项目（默认） */
  flex-wrap: wrap; /* 超出换行 */
  flex-wrap: wrap-reverse; /* 超出换行，反向排列 */

  /* 3. 主轴对齐方式（项目在主轴上的分布） */
  justify-content: flex-start; /* 左对齐（默认） */
  justify-content: center; /* 居中对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: space-between; /* 两端对齐，项目之间间距相等 */
  justify-content: space-around; /* 项目两侧间距相等 */
  justify-content: space-evenly; /* 项目之间、两端间距完全相等 */

  /* 4. 交叉轴对齐方式（单行项目在交叉轴上的对齐） */
  align-items: stretch; /* 拉伸填满容器（默认） */
  align-items: center; /* 居中对齐 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: baseline; /* 基线对齐 */

  /* 5. 多根轴线对齐方式（多行项目在交叉轴上的分布） */
  align-content: stretch; /* 拉伸填满容器（默认） */
  align-content: center; /* 居中 */
  align-content: flex-start; /* 顶部对齐 */
  align-content: flex-end; /* 底部对齐 */
  align-content: space-between; /* 两端对齐 */
  align-content: space-around; /* 均匀分布 */

  /* 6. 项目间距（CSS Box Alignment 扩展，主流浏览器已支持） */
  gap: 10px; /* 行间距+列间距统一设置 */
  gap: 10px 20px; /* 行间距 列间距 */
  row-gap: 10px; /* 行间距 */
  column-gap: 20px; /* 列间距 */
}

9.3 Flex项目属性

.flex-item {
  /* 1. 项目排列顺序 */
  order: 0; /* 默认值0，数值越小排列越靠前，支持负值 */

  /* 2. 放大比例 */
  flex-grow: 0; /* 默认值0，不放大；数值越大，分配的剩余空间越多 */

  /* 3. 缩小比例 */
  flex-shrink: 1; /* 默认值1，空间不足时允许缩小；0为不允许缩小 */

  /* 4. 项目初始大小 */
  flex-basis: auto; /* 默认值auto，项目原始大小；可设置固定尺寸 */

  /* 5. 复合属性（推荐使用） */
  flex: flex-grow flex-shrink flex-basis;
  flex: 0 1 auto; /* 默认值 */
  flex: 1; /* 等同于 flex: 1 1 0%，自适应填满剩余空间，高频使用 */

  /* 6. 单个项目的交叉轴对齐，覆盖容器的align-items */
  align-self: auto; /* 继承容器的align-items（默认） */
  align-self: center; /* 居中 */
  align-self: flex-start; /* 顶部对齐 */
  align-self: flex-end; /* 底部对齐 */
  align-self: stretch; /* 拉伸 */
}

9.4 高频应用场景

/* 1. 水平垂直居中（一行代码解决CSS2百年难题） */
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. 等高布局 */
.equal-height-container {
  display: flex;
  gap: 20px;
}
.equal-height-container > div {
  flex: 1;
}

/* 3. 两端对齐，最后一行左对齐 */
.justify-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* 解决最后一行分布问题，添加占位元素 */
.justify-list::after {
  content: "";
  width: 30%; /* 与列表项宽度一致 */
}

/* 4. 粘性页脚 */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1; /* 主体内容自动填满剩余空间，页脚固定在底部 */
}

十、Grid 网格布局

【CSS2.1 已有能力】

CSS2.1 无原生的二维布局能力，复杂的网格布局只能靠table布局、浮动+定位hack实现，代码冗余、灵活性极差，无法实现精准的行列控制。

【CSS3 核心变化&新增内容】

CSS3 在Grid Layout Module Level 1中新增了Grid二维网格布局模型，是CSS有史以来最强大的布局系统，可同时控制行和列两个维度，实现复杂的网格布局，无需嵌套容器，代码简洁、灵活性极强，是现代复杂页面布局的首选方案。

10.1 核心概念

网格容器：设置display: grid/display: inline-grid的父元素，开启网格布局
网格项目：网格容器内的直接子元素，自动成为网格项目
网格线：划分网格的线，分为行线和列线，从1开始编号
网格轨道：两条相邻网格线之间的空间，即行和列
网格单元格：四条网格线围成的最小区域，是网格的基本单位
网格区域：由多个网格单元格组成的矩形区域，可自定义命名

10.2 网格容器属性

.grid-container {
  /* 开启网格布局 */
  display: grid;
  display: inline-grid;

  /* 1. 定义列：列数+每列宽度 */
  grid-template-columns: 100px 200px 100px; /* 3列，固定宽度 */
  grid-template-columns: 1fr 2fr 1fr; /* 3列，宽度比例1:2:1，fr为分数单位 */
  grid-template-columns: repeat(
    3,
    1fr
  ); /* 重复3列，每列1fr，等同于1fr 1fr 1fr */
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* 响应式自适应列数，最小200px，最大1fr */
  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */

  /* 2. 定义行：行数+每行高度 */
  grid-template-rows: 100px 1fr 80px; /* 3行，头部固定100px，底部固定80px，中间自适应 */
  grid-template-rows: repeat(2, 100px auto); /* 重复行定义 */

  /* 3. 定义命名网格区域 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

  /* 4. 复合属性：同时定义行、列、区域 */
  grid-template: 100px 1fr 80px / 200px 1fr 200px;

  /* 5. 网格间距 */
  gap: 20px; /* 行间距+列间距统一设置 */
  gap: 10px 20px; /* 行间距 列间距 */
  row-gap: 10px; /* 行间距 */
  column-gap: 20px; /* 列间距 */

  /* 6. 网格项目在单元格内的水平对齐 */
  justify-items: stretch; /* 拉伸填满单元格（默认） */
  justify-items: center; /* 水平居中 */
  justify-items: start; /* 左对齐 */
  justify-items: end; /* 右对齐 */

  /* 7. 网格项目在单元格内的垂直对齐 */
  align-items: stretch; /* 拉伸填满单元格（默认） */
  align-items: center; /* 垂直居中 */
  align-items: start; /* 顶部对齐 */
  align-items: end; /* 底部对齐 */

  /* 8. 整个网格在容器内的水平对齐（容器宽度大于网格总宽度时生效） */
  justify-content: start; /* 左对齐（默认） */
  justify-content: center; /* 居中 */
  justify-content: end; /* 右对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 均匀分布 */

  /* 9. 整个网格在容器内的垂直对齐（容器高度大于网格总高度时生效） */
  align-content: start; /* 顶部对齐（默认） */
  align-content: center; /* 居中 */
  align-content: end; /* 底部对齐 */

  /* 10. 隐式网格控制（超出定义的行列时，自动生成的网格） */
  grid-auto-columns: 100px; /* 隐式列的宽度 */
  grid-auto-rows: 100px; /* 隐式行的高度 */
  grid-auto-flow: row; /* 自动排列方向，默认行优先 */
  grid-auto-flow: column; /* 列优先 */
  grid-auto-flow: dense; /* 紧凑排列，填充空白 */
}

10.3 网格项目属性

.grid-item {
  /* 1. 定义项目占据的列范围 */
  grid-column-start: 1; /* 起始列线 */
  grid-column-end: 3; /* 结束列线 */
  grid-column: 1 / 3; /* 简写，从第1根列线到第3根列线，占据2列 */
  grid-column: 1 / span 2; /* 简写，从第1根列线开始，跨越2列 */

  /* 2. 定义项目占据的行范围 */
  grid-row-start: 1; /* 起始行线 */
  grid-row-end: 2; /* 结束行线 */
  grid-row: 1 / 2; /* 简写 */
  grid-row: 1 / span 1; /* 简写 */

  /* 3. 复合属性：行起始 / 列起始 / 行结束 / 列结束 */
  grid-area: 1 / 1 / 2 / 3;

  /* 4. 绑定命名网格区域 */
  grid-area: header; /* 对应容器中grid-template-areas定义的header区域 */

  /* 5. 单个项目在单元格内的水平对齐，覆盖容器的justify-items */
  justify-self: stretch; /* 拉伸 */
  justify-self: center; /* 水平居中 */
  justify-self: start; /* 左对齐 */
  justify-self: end; /* 右对齐 */

  /* 6. 单个项目在单元格内的垂直对齐，覆盖容器的align-items */
  align-self: stretch; /* 拉伸 */
  align-self: center; /* 垂直居中 */
  align-self: start; /* 顶部对齐 */
  align-self: end; /* 底部对齐 */
}

10.4 高频应用场景

/* 经典后台布局，无需嵌套容器 */
.admin-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 60px;
  height: 100vh;
  gap: 0;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

/* 响应式卡片列表，无需媒体查询，自动适配列数 */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
```
  ##
  十一、多列布局
  ###
  【CSS2.1
  已有能力】
  CSS2.1
  无原生的多列文本布局能力，报纸、杂志式的多栏排版只能靠多个div分栏模拟，无法实现内容自动流动，开发成本极高。
  ###
  【CSS3
  核心变化&新增内容】
  CSS3
  在**Multi-column
  Layout
  Module**中新增了原生多列布局能力，专门用于文本类内容的多栏排版，内容可自动在列之间流动，无需拆分内容、无需嵌套容器，是长文本排版的最佳方案。
  ####
  11.1
  核心属性
  ```css
  .multi-column-box {
  /* 1. 列数控制 */
  column-count: 3; /* 固定列数，3列 */
  column-width: 200px; /* 固定列宽，浏览器自动计算列数 */
  columns: 3 200px; /* 复合属性，同时设置列数和列宽，取最小值生效 */

  /* 2. 列间距 */
  column-gap: 40px; /* 列与列之间的间距 */

  /* 3. 列分隔线 */
  column-rule: 1px solid #eee; /* 复合属性，列分隔线的宽度、样式、颜色，不占据空间 */
  column-rule-width: 1px; /* 分隔线宽度 */
  column-rule-style: solid; /* 分隔线样式 */
  column-rule-color: #eee; /* 分隔线颜色 */

  /* 4. 列填充方式 */
  column-fill: balance; /* 平衡列高，各列高度尽量一致（默认） */
  column-fill: auto; /* 按顺序填充，先填满第一列，再填第二列 */
}

/* 跨列设置 */
.column-title {
  column-span: all; /* 跨所有列，常用于标题 */
  column-span: none; /* 不跨列（默认） */
}

/* 防止内容被列截断 */
.column-item {
  break-inside: avoid-column; /* 禁止在列之间截断该元素，常用于图片、段落、卡片 */
}

11.2 适用场景

新闻、文章、杂志类的长文本多栏排版
瀑布流式的图文列表排版
选项、标签的多列分布

十二、CSS3 新增长度单位

【CSS2.1 已有能力】

CSS2.1 仅支持绝对单位（px、pt、cm等）、相对单位（em、%），无基于视口的相对单位，响应式适配只能靠百分比和媒体查询，实现难度大。

【CSS3 核心变化&新增内容】

CSS3 在Values and Units Module Level 3中新增了多个相对单位，彻底改变了响应式布局的实现方式，支持基于根元素、视口、内容的动态尺寸计算。

12.1 rem 根元素相对单位

rem 是相对于**根元素（html标签）**字体大小的单位，1rem = html标签的font-size值，解决了em相对于父元素导致的层级嵌套计算复杂的痛点，是移动端适配的核心单位。

/* 根元素设置基准字号 */
html {
  font-size: 16px; /* 浏览器默认字号，1rem=16px */
}
h1 {
  font-size: 2rem; /* 32px */
}
p {
  font-size: 1rem; /* 16px */
  margin-bottom: 1.5rem; /* 24px */
}
/* 移动端适配，屏幕宽度变化时，动态修改根元素字号 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

核心区别：rem vs em

单位	相对基准	适用场景
rem	仅相对于html根元素的字号，与父元素无关	全局响应式适配、统一的尺寸规范
em	相对于当前元素（或父元素）的字号，嵌套时会叠加	基于当前元素字号的局部适配，如按钮、标签的内边距

12.2 视口相对单位 vw/vh/vmin/vmax

CSS3 新增了基于浏览器视口尺寸的相对单位，1vw = 视口宽度的1%，1vh = 视口高度的1%，无需媒体查询即可实现随屏幕尺寸动态变化的尺寸。

单位	含义	适用场景
`vw`	视口宽度的1%，100vw = 视口完整宽度	响应式宽度、字体大小、全屏元素
`vh`	视口高度的1%，100vh = 视口完整高度	全屏容器、高度自适应元素
`vmin`	视口宽度和高度中较小值的1%	横竖屏切换时，保证元素不超出屏幕
`vmax`	视口宽度和高度中较大值的1%	全屏元素，保证元素铺满屏幕

坑点提醒与最佳实践：

移动端100vh会包含浏览器地址栏，导致实际高度超出可视区域，推荐使用CSS4新增的dvh（动态视口高度）替代，主流浏览器已支持

/* 兼容移动端地址栏的全屏高度 */
.full-screen {
  height: 100vh; /* 兜底 */
  height: 100dvh; /* 动态视口高度，自动排除地址栏 */
}

100vw在PC端会包含滚动条宽度，导致横向滚动条，非必要不使用100vw，优先使用100%

12.3 fr 分数单位

CSS3 Grid布局新增的分数单位，代表网格容器中剩余空间的一份，用于自动分配容器的剩余空间，是Grid布局的核心单位。

/* 3列，左右固定200px，中间自动分配剩余空间 */
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

12.4 其他新增单位

ch：相对于数字0的宽度，1ch = 数字0的宽度，适合设置等宽文本的容器宽度
ex：相对于小写字母x的高度，适合基于文本高度的精细调整
新增动态视口单位：dvh/svh/lvh、dvw/svw/lvw，解决移动端视口单位的兼容性问题

12.5 calc() 计算函数

CSS3 新增calc()函数，支持CSS属性值的四则运算，可混合不同单位进行计算，彻底解决了CSS2中无法动态计算尺寸的痛点，是响应式布局的核心工具。

语法：

calc(表达式)

支持+、-、*、/四则运算，运算符前后必须加空格
支持混合不同单位（px、%、rem、vw等）
支持嵌套计算

高频用法：

/* 宽度100%减去20px的内边距 */
.box {
  width: calc(100% - 40px);
  padding: 0 20px;
}
/* 动态计算根元素字号，实现移动端自适应 */
html {
  font-size: calc(16px + 0.5vw);
}
/* 固定头部，主体内容高度自适应 */
.main {
  height: calc(100vh - 60px);
  margin-top: 60px;
}

十三、媒体查询与响应式升级

【CSS2.1 已有能力】

CSS2.1 仅支持@media规则针对媒体类型（screen/print/handheld等）设置样式，无法针对设备尺寸、分辨率、系统偏好等特性做适配，无响应式设计的基础。

【CSS3 核心变化&新增内容】

CSS3 在Media Queries Module中对媒体查询进行了革命性扩展，新增了数十种媒体特性，可针对设备宽度、高度、分辨率、颜色深度、系统偏好等进行精准适配，是响应式网页设计的核心基础。

13.1 基础语法

1
2
3

@media 媒体类型 and (媒体特性条件) {
  /* 满足条件时生效的样式 */
}

核心媒体类型：

all：所有设备（默认）
screen：电脑、手机、平板等屏幕设备
print：打印预览/打印设备

高频媒体特性：

特性	作用	示例
`width` / `height`	视口宽度/高度	`max-width: 768px`（视口宽度≤768px时生效）
`min-width` / `min-height`	最小视口宽度/高度	`min-width: 1200px`（视口宽度≥1200px时生效）
`device-pixel-ratio`	设备像素比	`min-device-pixel-ratio: 2`（视网膜屏）
`orientation`	屏幕方向	`orientation: portrait`（竖屏）/`landscape`（横屏）
`prefers-color-scheme`	系统主题偏好	`prefers-color-scheme: dark`（深色模式）
`prefers-reduced-motion`	系统减少动画偏好	`prefers-reduced-motion: reduce`（关闭不必要的动画）

13.2 高频用法

/* 1. 移动优先：先写移动端样式，再用min-width适配大屏幕 */
/* 移动端默认样式 */
.container {
  width: 100%;
  padding: 0 15px;
}
/* 平板及以上 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}
/* 桌面端 */
@media screen and (min-width: 1024px) {
  .container {
    width: 980px;
  }
}
/* 大屏端 */
@media screen and (min-width: 1440px) {
  .container {
    width: 1200px;
  }
}

/* 2. 范围语法（CSS Media Queries Level 4 新增，更直观） */
@media screen and (768px <= width <= 1024px) {
  /* 平板设备专属样式 */
}

/* 3. 适配系统深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #ffffff;
  }
}

/* 4. 适配视网膜高清屏 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo {
    background-image: url(logo@2x.png);
  }
}

/* 5. 适配减少动画偏好，关爱晕动症用户 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

13.3 最佳实践

移动优先策略：先编写移动端基础样式，再通过min-width逐步适配大屏幕，减少代码冗余，提升移动端性能
合理设置断点：基于产品设计设置断点，而非固定设备尺寸，常用断点：320px-767px（移动端）、768px-1023px（平板）、1024px-1439px（桌面）、1440px+（大屏）
优先使用弹性布局：优先使用Flex、Grid等弹性布局，减少媒体查询的使用，实现天然的响应式
使用相对单位：优先使用rem、vw等相对单位，避免固定像素值，提升适配性

十四、高频实用新增属性

14.1 object-fit 替换元素内容适配

CSS3 在Images Module Level 3中新增object-fit属性，控制img、video等替换元素的内容适配方式，解决了CSS2中替换元素变形、裁剪的痛点，与background-size逻辑完全一致。

取值	含义	适用场景
`fill`	拉伸填充容器，不保持比例，可能变形（默认）	无需保持比例的场景
`contain`	等比缩放，完整包含在容器内，无裁剪，可能有留白	完整展示图片/视频，不允许裁剪
`cover`	等比缩放，完全覆盖容器，可能被裁剪，无留白	头像、banner、卡片封面，高频使用
`none`	保持原始尺寸，不缩放	固定尺寸的缩略图
`scale-down`	取`none`和`contain`中尺寸更小的一个	响应式缩略图，避免放大模糊

配套属性：object-position，控制内容在容器内的位置，与background-position逻辑一致，默认center center。

/* 圆形头像，不变形、不拉伸 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}
/* 响应式视频封面 */
.video-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

14.2 pointer-events 指针事件控制

CSS3 从SVG规范扩展到HTML的属性，控制元素是否响应鼠标/触摸事件，无需JS即可实现点击穿透、禁用交互等效果。

高频取值	含义	适用场景
`auto`	元素正常响应鼠标事件（默认）	常规交互元素
`none`	元素不响应鼠标事件，事件会穿透到下层元素	禁用点击、遮罩层点击穿透、水印防点击

/* 禁用按钮点击 */
.disabled-btn {
  pointer-events: none;
  opacity: 0.6;
}
/* 全屏遮罩层，点击穿透到下层内容 */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
/* 水印防点击 */
.watermark {
  pointer-events: none;
  user-select: none;
}

14.3 user-select 文本选择控制

CSS3 在User Interface Module中新增的属性，控制用户是否可以选中文本，无需JS即可实现禁止文本复制的效果。

取值	含义
`none`	元素内的文本无法被选中
`auto`	浏览器默认行为（默认）
`text`	文本可以被选中
`all`	点击元素时，选中整个元素内的文本

/* 按钮、标签禁止选中文本 */
.btn,
.tag {
  user-select: none;
  -webkit-user-select: none;
}

14.4 appearance 原生样式去除

CSS3 新增的属性，去除表单元素的浏览器原生样式，实现自定义表单控件，无需嵌套容器。

/* 去除select、input的原生样式 */
select,
input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px 12px;
  background: #fff;
}

十五、CSS 自定义属性（CSS变量）

【CSS2.1 已有能力】

CSS2.1 无原生变量能力，样式复用只能靠复制粘贴，主题切换、动态样式修改只能靠预处理器（Less/Sass）或JS修改类名，无法实现运行时的动态样式调整。

【CSS3 核心变化&新增内容】

CSS3 在Custom Properties for Cascading Variables Module Level 1中新增了自定义属性（CSS变量），支持原生的样式变量定义、复用、继承、动态修改，是现代CSS工程化、主题切换、响应式设计的核心基础。

15.1 基础用法

定义变量：

变量名必须以--开头，大小写敏感
全局变量定义在:root伪类中，可在整个文档中使用
局部变量定义在特定选择器中，仅在该选择器及其子元素中生效

/* 全局变量定义 */
:root {
  --primary-color: #3498db;
  --success-color: #27ae60;
  --danger-color: #e74c3c;
  --font-size-base: 16px;
  --spacing-unit: 8px;
  --border-radius-base: 4px;
}

/* 局部变量定义 */
.card {
  --card-bg: #fff;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

使用变量：
使用var()函数调用变量，支持设置默认值，当变量未定义时，使用默认值。

/* 使用变量 */
.button {
  background-color: var(--primary-color);
  color: #fff;
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
  border-radius: var(--border-radius-base);
  border: 1px solid var(--primary-color);
}
/* 带默认值的变量调用 */
.box {
  background-color: var(--box-bg, #f5f5f5); /* 若--box-bg未定义，使用#f5f5f5 */
}

15.2 核心特性

继承性：CSS变量会像普通CSS属性一样被子元素继承，父元素定义的变量，子元素可直接使用
覆盖性：子元素可覆盖父元素定义的变量，仅在当前选择器内生效
动态性：可通过JavaScript动态修改、获取、删除CSS变量，实现运行时的样式调整
响应式适配：可在媒体查询中重新定义变量，实现响应式样式统一调整

15.3 与JavaScript交互

CSS变量的核心优势之一，是支持与JS原生交互，无需修改类名，即可实现全局样式动态调整。

// 1. 设置全局变量
document.documentElement.style.setProperty("--primary-color", "#e74c3c");

// 2. 获取变量值
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue("--primary-color")
  .trim();

// 3. 删除变量
document.documentElement.style.removeProperty("--primary-color");

15.4 高频应用场景

1. 主题切换

/* 浅色主题 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #eeeeee;
}
/* 深色主题 */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
  --border-color: #333333;
}
/* 全局使用 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

只需通过JS修改html标签的data-theme属性，即可实现全局主题切换，无需修改任何其他样式。

2. 响应式统一调整

:root {
  --font-size: 16px;
  --spacing: 20px;
}
@media (max-width: 768px) {
  :root {
    --font-size: 14px;
    --spacing: 15px;
  }
}
/* 全局使用，无需在媒体查询中重复修改 */
body {
  font-size: var(--font-size);
}
.container {
  padding: 0 var(--spacing);
}

3. 组件样式复用与定制

/* 按钮基础样式 */
.btn {
  --btn-bg: var(--primary-color);
  --btn-color: #fff;
  --btn-padding: 8px 16px;
  --btn-radius: 4px;

  background-color: var(--btn-bg);
  color: var(--btn-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
}
/* 危险按钮，仅需覆盖变量 */
.btn-danger {
  --btn-bg: var(--danger-color);
}
/* 大按钮，仅需覆盖变量 */
.btn-large {
  --btn-padding: 12px 24px;
  --btn-radius: 6px;
}

十六、CSS 滤镜与视觉特效

【CSS2.1 已有能力】

CSS2.1 无原生的视觉滤镜能力，模糊、灰度、发光等效果只能靠背景图、IE私有滤镜实现，无法动态调整，开发成本极高。

【CSS3 核心变化&新增内容】

CSS3 在Filter Effects Module中新增了filter属性，提供了一系列原生的视觉滤镜函数，无需图片、无需JS，即可实现模糊、亮度、对比度、灰度、阴影等视觉效果，同时支持SVG滤镜，可实现复杂的自定义特效。

16.1 常用滤镜函数

函数	作用	示例
`blur(px)`	高斯模糊，值越大越模糊	`filter: blur(5px);`
`brightness(%)`	亮度调整，100%为原始亮度，0%全黑，大于100%更亮	`filter: brightness(120%);`
`contrast(%)`	对比度调整，100%为原始对比度，0%无对比度	`filter: contrast(150%);`
`grayscale(%)`	灰度效果，100%完全灰度，0%原始颜色	`filter: grayscale(100%);`
`sepia(%)`	褐色/复古效果，100%完全褐色	`filter: sepia(80%);`
`invert(%)`	颜色反相，100%完全反色	`filter: invert(100%);`
`saturate(%)`	饱和度调整，100%原始饱和度，0%完全灰度	`filter: saturate(200%);`
`hue-rotate(deg)`	色相旋转，0-360deg，调整颜色色相	`filter: hue-rotate(90deg);`
`opacity(%)`	透明度调整，与opacity属性类似，可与其他滤镜组合	`filter: opacity(50%);`
`drop-shadow()`	投影滤镜，为元素内容（包括透明区域）添加阴影	`filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));`

16.2 核心特性

多个滤镜可组合使用，按书写顺序依次应用
滤镜作用于整个元素，包括内容、子元素、边框、背景
支持动画和过渡，可实现流畅的滤镜动效
性能提示：blur()滤镜会占用大量GPU资源，避免大面积、动画中过度使用

16.3 drop-shadow 与 box-shadow 的核心区别

特性	box-shadow	drop-shadow()
作用范围	仅为元素的边框盒子添加阴影，透明区域无阴影	为元素的实际内容（包括透明PNG、SVG、文字）添加阴影
支持内阴影	支持inset内阴影	不支持内阴影
多层阴影	支持	支持
性能	相对更高	相对更低，避免大面积使用

/* 透明PNG图标添加阴影，box-shadow无效，drop-shadow完美适配 */
.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

16.4 backdrop-filter 背景滤镜

CSS3 新增backdrop-filter属性，为元素背后的区域应用滤镜效果，而不是元素本身，可实现毛玻璃、背景模糊等效果，是现代UI设计的高频属性。

/* 导航栏毛玻璃效果 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

16.5 高频应用场景

/* 1. 网站哀悼模式，一键全站灰度 */
html {
  filter: grayscale(100%);
}

/* 2. 图片hover动效 */
.img-box img {
  transition: filter 0.3s ease;
}
.img-box:hover img {
  filter: brightness(1.1) saturate(1.2);
}

/* 3. 禁用状态置灰 */
.disabled {
  filter: grayscale(100%) opacity(0.6);
  pointer-events: none;
}

总结

CSS3 彻底重构了CSS的能力边界，从CSS2.1的单一大版本、基础样式描述，升级为模块化、可扩展、可编程的强大样式语言。

从核心能力的演进来看，CSS3 主要带来了四大革命性变化：

布局能力的彻底升级：Flexbox、Grid布局彻底解决了CSS2布局的痛点，让复杂的响应式布局变得简单高效
视觉与动效能力的全面扩展：圆角、阴影、渐变、变换、过渡、动画、滤镜，让CSS无需依赖图片和JS，即可实现丰富的视觉效果和流畅的交互动效
选择器与样式控制能力的增强：丰富的选择器、原生变量、计算函数，让CSS代码更简洁、复用性更强、维护成本更低
响应式与适配能力的原生支持：媒体查询、相对视口单位、rem，让响应式网页设计成为行业标准，完美适配多终端设备

栖桐听雨声

https://dfamemaster.github.io/post/css3-xin-zeng-de-shu-xing

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源栖桐听雨声 !

CSS 前端样式布局动画

2026-04-08 前端技术

2026-04-08 技术教程

CSS3新增属性详解

CSS3 新增属性详解

关于本文的交互式示例

一、选择器增强

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

1.1 新增属性选择器

1.2 新增结构性伪类选择器

1.3 新增状态伪类选择器

1.4 新增逻辑与兄弟选择器

1.5 伪元素规范升级

二、盒子属性升级

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

2.1 box-sizing 盒模型标准化

2.2 resize 元素尺寸缩放

2.3 box-shadow 盒子阴影

2.4 opacity 元素透明度

2.5 新增盒模型相关能力

三、CSS3 颜色系统升级

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

3.1 rgba() 带透明度的RGB颜色

3.2 hsla() 直观的色相颜色模式

3.3 新增核心颜色关键字与特性

四、背景属性全面升级

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

4.1 background-origin 背景图原点控制

4.2 background-clip 背景裁剪区域控制

4.3 background-size 背景图尺寸控制

4.4 多背景图支持

4.5 原生渐变背景

4.5.1 线性渐变 linear-gradient

4.5.2 径向渐变 radial-gradient

4.5.3 重复渐变

4.6 其他背景升级

五、边框属性升级

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

5.1 border-radius 圆角边框

5.2 border-image 图片边框

六、文本属性升级

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

6.1 @font-face 自定义字体

6.2 text-shadow 文本阴影

6.3 text-overflow 文本溢出省略

6.4 文本换行规则升级

6.5 text-decoration 文本装饰升级

6.6 其他新增文本属性

七、transform 2D/3D变换

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

7.1 核心特性

7.2 2D变换函数

7.3 3D变换函数

7.4 变换原点控制

八、过渡与动画

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

8.1 transition 平滑过渡

8.2 animation 关键帧动画

8.2.1 定义动画

8.2.2 应用动画

8.2.3 缓动函数与步进动画

8.3 动画性能最佳实践

九、Flexbox 弹性布局

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

9.1 核心概念

9.2 Flex容器属性

9.3 Flex项目属性

9.4 高频应用场景

十、Grid 网格布局

【CSS2.1 已有能力】

【CSS3 核心变化&新增内容】

10.1 核心概念

10.2 网格容器属性

10.3 网格项目属性