当前位置：首页 > news >正文

一、CSS3 新增选择器（非 “属性”，但为核心基础）

news 2025/8/28 10:25:13

CSS3 是 CSS（层叠样式表）的第三个主要版本，在 CSS2.1 基础上新增了大量特性，涵盖布局、视觉效果、动画、响应式等多个维度，极大提升了网页样式的表现力和开发效率。由于 CSS3 属性数量庞大（且部分属性为细分或实验性），以下将按核心功能模块分类，整理常用属性、用法及示例，帮助系统理解。

一、CSS3 新增选择器（非 “属性”，但为核心基础）

CSS3 扩展了选择器能力，无需依赖 HTML 类名或 ID 即可精准定位元素，减少 HTML 冗余。

选择器类型	语法示例	作用说明
属性选择器	`[attr^="val"]`	匹配属性 `attr` 以 `val` 开头的元素
	`[attr$="val"]`	匹配属性 `attr` 以 `val` 结尾的元素
	`[attr*="val"]`	匹配属性 `attr` 包含 `val` 的元素
结构伪类选择器	`:nth-child(n)`	匹配父元素下第 `n` 个子元素（`n` 可写公式，如 `2n` 偶数）
	`:nth-of-type(n)`	匹配父元素下第 `n` 个同类型子元素
	`:first-child` / `:last-child`	匹配父元素第一个 / 最后一个子元素
	`:empty`	匹配无内容（无文本、无子元素）的元素
状态伪类选择器	`:hover` / `:active` / `:focus`	鼠标悬浮 / 点击 / 获取焦点时的元素（部分为 CSS2 但常用）
	`:checked`	匹配被选中的表单元素（如单选框、复选框）
伪元素选择器	`::before` / `::after`	在元素内容前 / 后插入 “虚拟元素”（需配合 `content` 属性）
	`::first-letter`	匹配文本的第一个字符
	`::selection`	匹配用户选中的文本（仅支持 `color`/`background` 等少数属性）

二、盒模型模块（Box Model）

CSS3 新增 box-sizing 属性，解决了传统盒模型（content-box）中 “边框 / 内边距撑大元素” 的问题。

核心属性：`box-sizing`

作用：定义元素的 “盒模型计算方式”，即 width/height 是否包含边框（border）和内边距（padding）。
取值：
- content-box（默认）：width = 内容宽度（不含 padding/border），元素实际宽度 = 内容宽 + padding + border。
- border-box（推荐）：width = 内容宽 + padding + border，元素实际宽度固定为定义的 width，避免意外撑大。

示例：

.box {width: 200px;padding: 20px;border: 1px solid #000;box-sizing: border-box; /* 实际宽度仍为 200px，padding 和 border 从内部扣除 */
}

三、背景与边框模块

CSS3 大幅增强了背景和边框的视觉效果，支持多背景、圆角、阴影等。

1. 背景相关属性

属性名	作用说明	取值示例
`background-image`	设置背景图片（支持多背景，用逗号分隔）	`url("a.jpg"), url("b.png")`
`background-size`	控制背景图片尺寸	`cover`（覆盖容器）、`contain`（适应容器）、`100px 200px`（固定尺寸）
`background-position`	控制背景图片位置（支持百分比 / 关键词）	`center center`（居中）、`20% 80%`
`background-clip`	控制背景的 “裁剪范围”	`border-box`（默认，包含边框）、`padding-box`（仅内边距）、`content-box`（仅内容）
`background-origin`	控制背景图片的 “定位原点”	同 `background-clip` 的取值
`background-attachment`	控制背景图片是否随滚动条滚动	`fixed`（固定）、`scroll`（滚动）

多背景示例：

.bg {width: 500px;height: 300px;background-image: url("logo.png"), url("bg-pattern.jpg");background-size: 100px auto, cover; /* 第一个背景（logo）宽100px，第二个（图案）覆盖容器 */background-position: top left, center;background-repeat: no-repeat, repeat; /* 第一个不重复，第二个重复 */
}

2. 边框相关属性

属性名	作用说明	取值示例
`border-radius`	设置边框圆角（支持简写，实现圆形 / 椭圆）	`5px`（统一圆角）、`10px 20px 30px 40px`（左上→右上→右下→左下）、`50%`（圆形，需元素宽高相等）
`box-shadow`	为元素添加阴影（支持多阴影，逗号分隔）	`水平偏移垂直偏移模糊度扩散度颜色内阴影`（如 `2px 2px 5px rgba(0,0,0,0.3)`，内阴影加 `inset`）
`border-image`	用图片替代 “传统边框”（需配合 `border` 使用）	`url("border.png") 30 round`（图片地址、切片大小、重复方式）

边框圆角 + 阴影示例：

.card {width: 300px;height: 200px;border: 1px solid #eee;border-radius: 12px; /* 圆角 */box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 水平0、垂直4、模糊12、半透明阴影 */
}

四、文本与字体模块

CSS3 优化了文本排版和字体引入方式，支持阴影、溢出处理、自定义字体等。

属性名	作用说明	取值示例
`text-shadow`	为文本添加阴影（类似 `box-shadow`）	`1px 1px 2px #ff0000`（水平 1、垂直 1、模糊 2、红色）
`text-overflow`	处理文本溢出容器的显示方式（需配合 `white-space: nowrap` 和 `overflow: hidden`）	`ellipsis`（省略号）、`clip`（裁剪）
`white-space`	控制文本换行方式	`nowrap`（不换行）、`pre`（保留空格和换行）
`word-wrap` / `overflow-wrap`	允许长单词换行（避免溢出）	`break-word`（强制换行）
`word-break`	控制单词的断行规则	`break-all`（任意字符处断行）、`keep-all`（仅在空格 / 连字符处断行）
`@font-face`	引入自定义字体（无需依赖系统字体）	见下方示例

文本溢出省略示例：

.text {width: 200px;white-space: nowrap; /* 不换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

自定义字体示例：

/* 定义自定义字体 */
@font-face {font-family: "MyFont"; /* 字体名称（自定义） */src: url("MyFont-Regular.woff2") format("woff2"), /* 优先加载的字体文件 */url("MyFont-Regular.woff") format("woff"); /* 降级字体文件（兼容性） */font-weight: normal; /* 字体粗细 */font-style: normal; /* 字体样式（正常/斜体） */
}/* 使用自定义字体 */
.title {font-family: "MyFont", sans-serif; /*  sans-serif 为降级字体 */
}

五、变形（Transform）模块

transform 允许对元素进行旋转、平移、缩放、倾斜等 2D/3D 变形，不影响其他元素布局（类似 “视觉上的改变”）。

核心属性：`transform`

作用：定义元素的变形效果，支持多个变形函数（用空格分隔）。
2D 变形函数（常用）：
- translate(x, y)：平移（x 水平方向，y 垂直方向，单位 px/%），简化写法 translateX(x)/translateY(y)。
- rotate(deg)：旋转（单位 deg，正为顺时针，负为逆时针）。
- scale(x, y)：缩放（x 水平缩放，y 垂直缩放，1 为原尺寸，>1 放大，<1 缩小），简化写法 scaleX(x)/scaleY(y)。
- skew(x-deg, y-deg)：倾斜（x 水平倾斜，y 垂直倾斜，单位 deg），简化写法 skewX(x)/skewY(y)。
- matrix(a, b, c, d, e, f)：复合变形（通过矩阵计算，较少直接使用）。
3D 变形函数（常用）：
- translate3d(x, y, z)：3D 平移（z 轴为 “前后” 方向，单位 px）。
- rotate3d(x, y, z, deg)：3D 旋转（x/y/z 为 0 或 1，指定旋转轴），简化写法 rotateX(deg)/rotateY(deg)/rotateZ(deg)。
- perspective(n)：定义 3D 透视效果（模拟人眼距离，值越小透视越强，单位 px，需写在父元素或变形元素上）。
辅助属性：transform-origin：
- 作用：定义变形的 “原点”（默认是元素中心 center center）。
- 取值：x y（可写关键词，如 top left；或 px/%），3D 时加 z 轴值。

示例（2D 旋转 + 缩放）：

.box {width: 100px;height: 100px;background: red;transition: transform 0.3s; /* 配合过渡实现平滑效果 */transform-origin: top left; /* 变形原点设为左上角 */
}
.box:hover {transform: rotate(45deg) scale(1.2); /*  hover 时旋转45度+放大1.2倍 */
}

六、过渡（Transition）模块

transition 用于实现元素状态变化时的平滑过渡（如 hover 与默认状态的切换），无需 JS 即可实现简单动画。

核心属性：`transition`（可简写，也可拆分为单个属性）

拆分属性	作用说明	取值示例
`transition-property`	指定需要过渡的属性（`all` 表示所有可过渡属性）	`width, background-color`、`all`
`transition-duration`	过渡持续时间（必须设置，否则无效果）	`0.3s`、`500ms`
`transition-timing-function`	过渡的 “时间曲线”（控制速度变化）	`ease`（默认，慢→快→慢）、`linear`（匀速）、`ease-in`（慢→快）、`ease-out`（快→慢）、`cubic-bezier(n,n,n,n)`（自定义曲线）
`transition-delay`	过渡延迟时间（可选，默认 0）	`0.2s`（延迟 0.2 秒后开始过渡）

简写语法：transition: property duration timing-function delay;（顺序固定，可省略延迟）。

示例（按钮 hover 平滑变色 + 放大）：

.btn {padding: 8px 16px;background: #007bff;color: white;border: none;border-radius: 4px;/* 简写过渡：所有属性、0.3秒、ease曲线 */transition: all 0.3s ease;
}
.btn:hover {background: #0056b3; /* 变色 */transform: scale(1.05); /* 轻微放大 */
}

七、动画（Animation）模块

animation 比 transition 更强大，支持多关键帧、循环、自动播放等复杂动画，需配合 @keyframes 定义动画流程。

1. 核心属性：`animation`（可简写，也可拆分为单个属性）

拆分属性	作用说明	取值示例
`animation-name`	指定动画名称（需与 `@keyframes` 名称一致）	`fadeIn`、`slide`
`animation-duration`	动画持续时间（必须设置）	`2s`、`1500ms`
`animation-timing-function`	动画时间曲线（同 `transition-timing-function`）	`linear`、`ease` 等
`animation-delay`	动画延迟时间	`0.5s`
`animation-iteration-count`	动画循环次数	`infinite`（无限循环）、`3`（循环 3 次）
`animation-direction`	动画循环方向	`normal`（默认，正向）、`reverse`（反向）、`alternate`（正向→反向→正向…，需循环次数≥2）
`animation-fill-mode`	动画结束后元素的状态	`forwards`（保持最后一帧状态）、`backwards`（延迟时先应用第一帧状态）、`both`（同时应用 forwards 和 backwards）
`animation-play-state`	控制动画播放状态	`running`（默认，播放）、`paused`（暂停，可通过 JS 控制）

简写语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;（顺序灵活，可省略部分属性）。

2. 关键帧定义：`@keyframes`

作用：定义动画的 “关键节点”（从开始到结束的状态变化），用 from（0%）和 to（100%）或百分比（如 25%、50%）表示进度。

语法：

@keyframes 动画名称 {from { /* 动画开始状态（0%） */ }50% { /* 动画中间状态（50%） */ }to { /* 动画结束状态（100%） */ }
}

示例（无限旋转的加载动画）：

/* 定义旋转动画 */
@keyframes spin {from { transform: rotate(0deg); } /* 开始：0度 */to { transform: rotate(360deg); } /* 结束：360度（一圈） */
}/* 使用动画 */
.loader {width: 40px;height: 40px;border: 4px solid #eee;border-top: 4px solid #007bff; /* 顶部边框变色，形成“扇形”效果 */border-radius: 50%; /* 圆形 *//* 简写动画：名称spin、1秒、匀速、无限循环 */animation: spin 1s linear infinite;
}

八、弹性盒（Flexbox）布局模块

Flexbox（弹性盒）是 CSS3 引入的一维布局模型（适合 “行” 或 “列” 方向的布局），可轻松实现元素的对齐、分布、自适应，解决传统浮动布局的痛点。

1. 核心概念：容器（父元素）与项目（子元素）

给父元素设置 display: flex，父元素成为 “Flex 容器”，子元素自动成为 “Flex 项目”。
容器存在两根轴：主轴（默认水平，由 flex-direction 控制）和交叉轴（垂直于主轴）。

2. 容器属性（作用于父元素）

属性名	作用说明	取值示例
`display`	定义容器为 Flex 布局	`flex`（块级容器）、`inline-flex`（行内容器）
`flex-direction`	控制主轴方向（项目排列方向）	`row`（默认，水平从左到右）、`row-reverse`（水平从右到左）、`column`（垂直从上到下）、`column-reverse`（垂直从下到上）
`justify-content`	控制项目在主轴上的对齐方式	`flex-start`（默认，靠主轴起点）、`flex-end`（靠主轴终点）、`center`（居中）、`space-between`（两端对齐，项目间距相等）、`space-around`（项目两侧间距相等）
`align-items`	控制项目在交叉轴上的对齐方式	`stretch`（默认，拉伸填满交叉轴）、`flex-start`（靠交叉轴起点）、`flex-end`（靠交叉轴终点）、`center`（居中）、`baseline`（按项目基线对齐）
`flex-wrap`	控制项目是否换行（默认不换行，溢出压缩）	`nowrap`（默认，不换行）、`wrap`（换行，新行在下方）、`wrap-reverse`（换行，新行在上方）
`align-content`	控制多 line 项目在交叉轴上的对齐方式（仅当项目换行时生效）	取值同 `justify-content`（如 `center`、`space-between`）

3. 项目属性（作用于子元素）

属性名	作用说明	取值示例
`flex-grow`	项目的 “放大比例”（默认 0，不放大）	`1`（剩余空间按比例分配，如两个项目都设 1，各占 50%）
`flex-shrink`	项目的 “缩小比例”（默认 1，溢出时缩小）	`0`（不缩小，溢出时显示）、`2`（比其他项目缩小更快）
`flex-basis`	项目在主轴上的 “基准尺寸”（默认 `auto`，即项目自身尺寸）	`200px`（固定基准宽）、`50%`（基准宽为容器的 50%）
`flex`	`flex-grow` + `flex-shrink` + `flex-basis` 的简写（推荐使用）	`1`（等价于 `1 1 auto`，自适应放大缩小）、`0 0 200px`（固定尺寸，不放大不缩小）
`align-self`	单独控制某个项目的交叉轴对齐方式（覆盖容器的 `align-items`）	同 `align-items` 的取值
`order`	控制项目的排列顺序（默认 0，值越小越靠前）	`1`、`-1`（负数比正数靠前）

示例（水平居中 + 垂直居中的卡片）：

.container {width: 500px;height: 300px;border: 1px solid #eee;display: flex; /* 父元素设为 Flex 容器 */justify-content: center; /* 主轴（水平）居中 */align-items: center; /* 交叉轴（垂直）居中 */
}
.card {width: 200px;height: 150px;background: #f5f5f5;text-align: center;line-height: 150px;
}

九、网格（Grid）布局模块

Grid（网格）是 CSS3 引入的二维布局模型（同时控制 “行” 和 “列”），适合复杂的页面布局（如仪表盘、多栏卡片），比 Flexbox 更灵活。

1. 核心概念：容器（父元素）与项目（子元素）

给父元素设置 display: grid，父元素成为 “Grid 容器”，子元素自动成为 “Grid 项目”。
容器通过 grid-template-columns/grid-template-rows 定义 “列轨道” 和 “行轨道”，轨道之间的间距用 grid-gap（或 gap）设置。

2. 容器核心属性

属性名	作用说明	取值示例
`display`	定义容器为 Grid 布局	`grid`（块级容器）、`inline-grid`（行内容器）
`grid-template-columns`	定义 “列轨道” 的数量和宽度	`100px 200px auto`（3 列，宽分别为 100px、200px、自适应）、`repeat(3, 1fr)`（3 列，每列占 1 份剩余空间）、`1fr 2fr`（2 列，比例 1:2）
`grid-template-rows`	定义 “行轨道” 的数量和高度	同 `grid-template-columns`（如 `100px auto 150px`）
`gap` / `grid-gap`	定义轨道之间的间距（行列间距）	`10px`（行列间距均为 10px）、`10px 20px`（行间距 10px，列间距 20px）
`grid-template-areas`	给 “网格区域” 命名（方便项目定位）	见下方示例（用字符串表示区域分布）
`justify-items`	控制项目在 “单元格水平方向” 的对齐方式	`stretch`（默认）、`start`、`center`、`end`
`align-items`	控制项目在 “单元格垂直方向” 的对齐方式	同 `justify-items` 的取值
`place-items`	`align-items` + `justify-items` 的简写	`center center`（水平 + 垂直居中）

3. 项目核心属性

属性名	作用说明	取值示例
`grid-column`	控制项目 “列方向” 的位置（起始列线 + 结束列线）	`1 / 3`（从第 1 列线到第 3 列线，占 2 列）、`span 2`（占 2 列）
`grid-row`	控制项目 “行方向” 的位置（起始行线 + 结束行线）	`2 / 4`（从第 2 行线到第 4 行线，占 2 行）、`span 1`（占 1 行）
`grid-area`	项目所属的 “网格区域”（配合容器 `grid-template-areas` 使用）	`header`、`main`（对应容器定义的区域名）
`justify-self`	单独控制项目在单元格水平方向的对齐方式（覆盖容器 `justify-items`）	`center`、`end` 等
`align-self`	单独控制项目在单元格垂直方向的对齐方式（覆盖容器 `align-items`）	`center`、`end` 等

示例（三列两行的页面布局）：

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 3列，每列1份 */grid-template-rows: 100px auto 80px; /* 3行，高分别为100px、自适应、80px */gap: 10px; /* 间距10px */grid-template-areas: "header header header" /* 第一行：header 占3列 */"main main sidebar"    /* 第二行：main 占2列，sidebar 占1列 */"footer footer footer"; /* 第三行：footer 占3列 */height: 500px;
}.header { grid-area: header; background: #007bff; }
.main { grid-area: main; background: #f5f5f5; }
.sidebar { grid-area: sidebar; background: #eee; }
.footer { grid-area: footer; background: #333; color: white; }

十、多列布局（Columns）模块

多列布局用于将文本内容按列分割（类似报纸 / 杂志的分栏效果），适合长文本排版。

属性名	作用说明	取值示例
`column-count`	定义分栏的 “列数”（优先于 `column-width`）	`2`（2 列）、`3`（3 列）
`column-width`	定义每列的 “最小宽度”（容器足够宽时自动增加列数）	`200px`（每列最小 200px）
`column-gap`	定义列之间的 “间距”	`20px`、`1em`
`column-rule`	定义列之间的 “分隔线”（简写，含宽度、样式、颜色）	`1px solid #eee`（1px 灰色实线）
`column-span`	控制元素是否 “跨列”（作用于子元素）	`1`（默认，不跨列）、`all`（跨所有列）

示例（新闻文本分 2 栏）：

.news {width: 800px;column-count: 2; /* 分2栏 */column-gap: 30px; /* 列间距30px */column-rule: 1px dashed #ccc; /* 列分隔线：1px 虚线灰色 */
}
.news-title {column-span: all; /* 标题跨所有列 */text-align: center;font-size: 24px;
}

十一、用户界面（UI）模块

CSS3 新增了部分用于优化用户界面的属性，如光标样式、元素可调整大小等。

属性名	作用说明	取值示例
`cursor`	控制鼠标悬浮在元素上时的 “光标样式”	`pointer`（手型，链接默认）、`text`（文本光标）、`move`（移动光标）、`not-allowed`（禁止光标）、`url("cursor.png"), auto`（自定义光标，需加降级）
`resize`	控制元素是否 “允许用户调整大小”	`none`（默认，不允许）、`both`（水平 + 垂直可调整）、`horizontal`（仅水平）、`vertical`（仅垂直）（需配合 `overflow: auto` 或 `hidden` 使用）
`outline`	控制元素获取焦点时的 “外边框”（区别于 `border`，不占空间）	`none`（去除默认焦点边框，需自定义焦点样式保证可访问性）、`2px solid #007bff`
`appearance`	控制元素的 “默认外观”（如去除下拉框的默认样式）	`none`（清除默认外观）、`button`（模拟按钮外观）（需加浏览器前缀，如 `-webkit-appearance`）

示例（自定义可调整大小的文本域）：

textarea {width: 300px;height: 150px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;resize: vertical; /* 仅允许垂直调整大小 */outline: none; /* 去除默认焦点边框 */
}
textarea:focus {border-color: #007bff; /* 自定义焦点边框颜色 */
}

十二、媒体查询（Media Queries）

媒体查询是响应式设计的核心，允许根据设备的屏幕尺寸、分辨率等条件，加载不同的 CSS 样式（如手机、平板、电脑显示不同布局）。

语法结构

/* 基础语法：当条件满足时，应用内部样式 */
@media 媒体类型 and (媒体特性) {/* 条件满足时的 CSS 样式 */
}

媒体类型（可选，默认 all）：
- all：所有设备。
- screen：屏幕设备（电脑、手机、平板等）。
- print：打印设备。
常用媒体特性：
- width / max-width / min-width：屏幕宽度（max-width: 768px 表示 “宽度≤768px”，即手机端）。
- height / max-height / min-height：屏幕高度。
- orientation：屏幕方向（portrait 竖屏，landscape 横屏）。
- resolution：屏幕分辨率（如 min-resolution: 2dppx 表示高清屏）。

示例（响应式布局：电脑端 3 列，手机端 1 列）：

.card-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 电脑端：3列 */gap: 20px;
}/* 当屏幕宽度 ≤ 768px（手机端）时，改为1列 */
@media screen and (max-width: 768px) {.card-container {grid-template-columns: 1fr; /* 手机端：1列 */}
}

十三、兼容性与浏览器前缀

部分 CSS3 属性在早期浏览器中需添加浏览器前缀才能生效（如 Chrome/Safari 的 -webkit-、Firefox 的 -moz-）。目前主流浏览器（Chrome 60+、Firefox 55+、Edge 16+）已支持大部分属性的标准语法，但如需兼容旧浏览器，可添加前缀。

标准属性	带前缀的属性（示例）
`transform`	`-webkit-transform`、`-moz-transform`
`transition`	`-webkit-transition`、`-moz-transition`
`animation`	`-webkit-animation`、`-moz-animation`
`border-radius`	`-webkit-border-radius`、`-moz-border-radius`
`box-shadow`	`-webkit-box-shadow`、`-moz-box-shadow`

示例（兼容写法）：

.box {-webkit-border-radius: 10px; /* Safari/Chrome 旧版本 */-moz-border-radius: 10px;    /* Firefox 旧版本 */border-radius: 10px;         /* 标准语法（最后写，优先级高） */
}