CSS3 是层叠样式表（CSS）的最新版本，在 CSS2 基础上新增大量特性，大幅扩展网页样式设计能力，涵盖精准选择器、灵活布局、丰富视觉效果与动态交互能力。
一、选择器增强
1. 新增选择器类型
选择器类型
示例
作用
属性选择器增强
a[href^="https"]
选择属性值以指定内容开头的元素
a[href$=".pdf"]
选择属性值以指定内容结尾的元素
div[class="item"]
选择属性值包含指定内容的元素
伪类选择器
li:nth-child(2)
选择父元素中第二个 元素
p:nth-of-type(odd)
选择同类型元素中的奇数项
:target
选择当前激活的锚点元素
2. 选择器组合使用
后代选择器：article p（选择 article 内所有 `）
子选择器：nav > ul（选择 nav 直接子元素 `
相邻兄弟选择器：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-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）
/* 定义关键帧 */
@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 交互效果，提升用户体验，是现代网页设计的核心能力。
探索更多内容
相关资源
