CSS3 是层叠样式表（CSS）的最新版本，在 CSS2 基础上新增大量特性，大幅扩展网页样式设计能力，涵盖精准选择器、灵活布局、丰富视觉效果与动态交互能力。
一、选择器增强
1. 新增选择器类型
|
选择器类型
|
示例
|
作用
|
|
属性选择器增强
|
a[href^="https"]
|
选择属性值以指定内容开头的元素
|
|
|
a[href$=".pdf"]
|
选择属性值以指定内容结尾的元素
|
|
|
div[class="item"]
|
选择属性值包含指定内容的元素
|
|
伪类选择器
|
li:nth-child(2)
|
选择父元素中第二个 <li> 元素
|
|
|
p:nth-of-type(odd)
|
选择同类型元素中的奇数项
|
|
|
:target
|
选择当前激活的锚点元素
|
2. 选择器组合使用
后代选择器：article p（选择 article 内所有 `<p>）
子选择器：nav > ul（选择 nav 直接子元素 `<ul>）
相邻兄弟选择器：h1 + p（选择紧跟 `<h1> 后的 <p>）
二、盒模型增强与布局新特性
1. 盒模型相关属性
box-sizing：控制元素尺寸计算方式
content-box（默认）：仅计算内容宽度/高度
border-box：包含内容、内边距、边框（布局更易控制）
- .box {
- box-sizing: border-box;
- width: 200px;
- padding: 20px;
- border: 1px solid #000;
- /* 最终宽度仍为 200px */
- }
2. 新布局模型
（1）Flexbox 弹性布局
一维布局（水平/垂直），通过 display: flex 启用：
- .container {
- display: flex;
- justify-content: center; /* 主轴居中 */
- align-items: center; /* 交叉轴居中 */
- }
核心属性：justify-content、align-items、flex-direction、flex-wrap
（2）Grid 网格布局
二维布局（行+列），精准划分页面区域：
- .grid-container {
- display: grid;
- grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
- grid-template-rows: 100px auto; /* 两行，第一行 100px */
- gap: 20px; /* 网格间距 */
- }
核心属性：grid-template-columns、grid-template-rows、grid-row、grid-column
三、文本效果与字体特性
1. 文本效果
- /* 文本阴影 */
- .text-shadow {
- text-shadow: 2px 2px 3px #ccc; /* 水平偏移、垂直偏移、模糊半径、颜色 */
- }
- /* 文本溢出省略 */
- .ellipsis {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
其他属性：word-break（换行规则）、word-wrap（长单词换行）
2. 字体相关特性
（1）@font-face 自定义字体
- {
- font-family: 'MyCustomFont';
- src: url('font.woff2') format('woff2'),
- url('font.woff') format('woff');
- }
- body {
- font-family: 'MyCustomFont', sans-serif;
- }
（2）字体装饰增强
- .text-style {
- font-variant: small-caps; /* 小型大写字母 */
- text-decoration: underline wavy red; /* 波浪形红色下划线 */
- }
四、2D/3D 转换与动画效果
1. 2D 转换
- .transform-2d {
- /* 平移 */
- transform: translate(50px, 100px);
- /* 旋转 */
- transform: rotate(45deg);
- /* 缩放 */
- transform: scale(1.2);
- /* 倾斜 */
- transform: skew(10deg, 5deg);
- /* 组合使用 */
- transform: translate(20px) rotate(15deg) scale(0.9);
- }
2. 3D 转换
- .transform-3d {
- transform-style: preserve-3d; /* 开启 3D 空间 */
- transform: rotate3d(1, 1, 0, 45deg); /* x/y/z 轴旋转 45 度 */
- }
3. 动画效果（@keyframes）
- /* 定义关键帧 */
- blink {
- 0% { opacity: 1; }
- 50% { opacity: 0; }
- 100% { opacity: 1; }
- }
- /* 应用动画 */
- .element {
- animation: blink 2s infinite ease-in-out;
- /* 动画名称 | 时长 | 循环 | 时间函数 */
- }
五、过渡效果（Transitions）
1. 基本用法
- .button {
- background: #007bff;
- /* 定义过渡 */
- transition: background 0.3s ease-in-out, transform 0.3s;
- }
- .button:hover {
- background: #0056b3;
- transform: scale(1.05);
- /* 属性变化时自动过渡 */
- }
2. 核心属性
transition-property：指定过渡的属性（如 all 表示所有属性）
transition-duration：过渡持续时间
transition-timing-function：过渡速度曲线（linear/ease/ease-in-out）
transition-delay：延迟执行时间
总结
CSS3 核心升级：精准选择器、Flex/Grid 布局、自定义字体、2D/3D 转换、动画/过渡；
Flex 适合一维布局（如导航栏），Grid 适合复杂二维页面布局；
动画/过渡可实现无 JS 交互效果，提升用户体验，是现代网页设计的核心能力。
探索更多内容
CSS3 9 个结果