CSS3 新增属性
1. 选择器（Selectors）
CSS3 新增了许多强大的选择器，可以更精确地匹配元素。
| 选择器 |
示例 |
描述 |
| 属性选择器 |
input[type="text"] |
匹配具有特定属性的元素 |
| 结构伪类 |
:nth-child(n) |
匹配第 n 个子元素 |
|
:first-of-type |
匹配同类型的第一个元素 |
|
:last-child |
匹配最后一个子元素 |
|
:not(selector) |
排除匹配的元素 |
| UI 伪类 |
:checked |
匹配被选中的表单元素（如复选框） |
|
:disabled |
匹配禁用的表单元素 |
|
:enabled |
匹配可用的表单元素 |
| 目标伪类 |
:target |
匹配当前 URL 的锚点目标元素 |
2. 盒模型（Box Model）
CSS3 提供了更灵活的盒模型控制方式。
| 属性 |
描述 |
box-sizing: border-box |
使 width 和 height 包含 padding 和 border |
resize |
允许用户调整元素大小（both、horizontal、vertical） |
outline-offset |
设置轮廓（outline）与边框的偏移距离 |
3. 背景与边框（Background & Border）
CSS3 增强了背景和边框的样式控制。
背景（Background）
| 属性 |
描述 |
background-size |
控制背景图片大小（cover、contain、100% 100%） |
background-clip |
定义背景绘制区域（border-box、padding-box、content-box） |
background-origin |
定义背景定位的基准区域 |
background-attachment: local |
背景随内容滚动 |
background: url(img1.png), url(img2.png); |
多背景 |
边框（Border）
| 属性 |
描述 |
border-radius |
圆角边框（border-radius: 10px;） |
box-shadow |
盒子阴影（box-shadow: 5px 5px 10px #888;） |
border-image |
使用图片作为边框（border-image: url(border.png) 30 round;） |
4. 渐变（Gradients）
CSS3 支持线性渐变和径向渐变。
| 类型 |
示例 |
描述 |
| 线性渐变 |
background: linear-gradient(to right, red, blue); |
从左到右渐变 |
| 径向渐变 |
background: radial-gradient(circle, red, yellow); |
从中心向外渐变 |
| 重复渐变 |
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px); |
重复渐变 |
5. 过渡（Transitions）
CSS3 过渡允许属性在一定时间内平滑变化。
| 属性 |
描述 |
transition-property |
指定过渡的属性（如 width、opacity） |
transition-duration |
过渡持续时间（如 1s） |
transition-timing-function |
过渡速度曲线（ease、linear、cubic-bezier()） |
transition-delay |
过渡延迟时间 |
| 简写 |
transition: width 1s ease 0.5s; |
6. 动画（Animations）
CSS3 动画比过渡更强大，支持关键帧控制。
| 属性 |
描述 |
@keyframes |
定义动画关键帧 |
animation-name |
指定动画名称 |
animation-duration |
动画持续时间 |
animation-timing-function |
动画速度曲线 |
animation-delay |
动画延迟时间 |
animation-iteration-count |
动画播放次数（infinite 表示无限循环） |
animation-direction |
动画方向（normal、reverse、alternate） |
animation-fill-mode |
动画结束后保持状态（forwards、backwards） |
| 简写 |
animation: move 2s ease infinite; |
示例：
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
div {
animation: move 2s ease infinite;
}
7. 变形（Transforms）
CSS3 变形允许对元素进行 2D/3D 变换。
2D 变形：
| 属性 |
描述 |
transform: translate(x, y) |
移动元素 |
transform: rotate(45deg) |
旋转元素 |
transform: scale(1.5) |
缩放元素 |
transform: skew(30deg) |
倾斜元素 |
| 组合变换 |
transform: rotate(45deg) scale(1.2); |
3D 变形：
| 属性 |
描述 |
transform: translate3d(x, y, z) |
3D 移动 |
transform: rotateX(45deg) |
绕 X 轴旋转 |
transform: perspective(500px) |
设置 3D 透视距离 |
8. 弹性布局（Flexbox）
CSS3 Flexbox 提供更灵活的布局方式。
| 属性 |
描述 |
display: flex |
启用 Flex 布局 |
flex-direction |
主轴方向（row、column） |
justify-content |
主轴对齐方式（center、space-between） |
align-items |
交叉轴对齐方式（center、stretch） |
flex-wrap |
是否换行（wrap、nowrap） |
flex-grow |
定义项目的放大比例 |
flex-shrink |
定义项目的缩小比例 |
flex-basis |
定义项目的初始大小 |
9. 网格布局（Grid）
CSS3 Grid 提供二维布局系统。
| 属性 |
描述 |
display: grid |
启用 Grid 布局 |
grid-template-columns |
定义列宽（如 1fr 2fr） |
grid-template-rows |
定义行高 |
grid-gap |
定义行列间距 |
grid-column / grid-row |
定义项目占据的网格区域 |
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 200px auto; /* 三列：固定100px，固定200px，剩余空间 */
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
10. 媒体查询（Media Queries）
CSS3 媒体查询允许针对不同设备应用不同样式。
/* 屏幕宽度小于 600px 时生效 */
@media (max-width: 600px) {
body { background: lightblue; }
}
BEM 命名规范
BEM（Block-Element-Modifier）是一种流行的 CSS 命名方法论，旨在提高代码可读性、可维护性和可复用性。其核心思想是通过模块化的方式组织 CSS 类名，避免样式冲突。
1. BEM 基本结构
| BEM 将界面拆分为三个部分： |
部分 |
描述 |
示例 |
| Block |
独立的、可复用的组件（如按钮、卡片、导航栏）。 |
.btn、.card |
| Element |
属于 Block 的子元素，不能单独使用（如按钮的图标、卡片的标题）。 |
.btn__icon、.card__title |
| Modifier |
表示 Block 或 Element 的状态或变体（如禁用按钮、大号卡片）。 |
.btn--disabled、.card--large |
2. 命名规则
(1) Block（块）
- 使用单一单词或短横线连接（
-）的命名方式。
- 代表一个独立的组件，不依赖其他元素。
.header { ... } /* 页眉 */
.menu { ... } /* 菜单 */
.search-box { ... } /* 搜索框 */
(2) Element（元素）
- 格式：
Block名称__Element名称（双下划线 __ 连接）。
- 表示属于 Block 的一部分，不能脱离 Block 使用。
.menu__item { ... } /* 菜单项 */
.search-box__input { ... } /* 搜索框的输入框 */
.card__title { ... } /* 卡片的标题 */
(3) Modifier（修饰符）
- 格式：
Block--Modifier 或 Block__Element--Modifier（双短横线 -- 连接）。
- 表示 Block 或 Element 的不同状态或样式变体。
.button--primary { ... } /* 主要按钮 */
.button--disabled { ... } /* 禁用按钮 */
.menu__item--active { ... } /* 当前选中的菜单项 */
3. 实际代码示例
HTML 结构
<!-- Block: card -->
<div class="card card--highlight">
<!-- Element: card 的子元素 -->
<h2 class="card__title">标题</h2>
<p class="card__content">内容...</p>
<!-- 带 Modifier 的 Element -->
<button class="card__button card__button--large">点击</button>
</div>
CSS 样式
/* Block */
.card {
border: 1px solid #ccc;
padding: 16px;
}
/* Modifier: 高亮卡片 */
.card--highlight {
background: #f5f5f5;
}
/* Element: 卡片标题 */
.card__title {
font-size: 18px;
color: #333;
}
/* Element: 卡片按钮 */
.card__button {
padding: 8px 16px;
}
/* Modifier: 大号按钮 */
.card__button--large {
padding: 12px 24px;
}
