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

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

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

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

二、盒模型模块（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. 背景相关属性

• 多背景示例 ：

  .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. 边框相关属性

• 边框圆角 + 阴影示例：

  .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 {
    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 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 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. 容器属性（作用于父元素）

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

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

  .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. 容器核心属性

3. 项目核心属性

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

  .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）模块

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

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

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

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

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

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

  textarea {
    width: 300px;
    height: 150px;
    padding: 10px;
    border: 1px solid #***c;
    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+）已支持大部分属性的标准语法，但如需兼容旧浏览器，可添加前缀。

• 示例（兼容写法） ：

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

十四、总结与学习建议

CSS3 的核心优势在于：

1. 布局更灵活：Flexbox 解决一维对齐，Grid 解决二维复杂布局，替代传统浮动。
2. 视觉效果更丰富：圆角、阴影、多背景、渐变（linear-gradient/radial-gradient，未单独列出，常用作背景）等。
3. 动画更简单：Transition 实现简单过渡，Animation 实现复杂循环动画，无需 JS。
4. 响应式更易实现：媒体查询适配不同设备。

学习建议：

• 不必死记所有属性，重点掌握 Flexbox、Grid、动画、响应式这四大核心模块。
• 结合实际项目练习（如搭建响应式页面、实现动画效果），通过 Can I Use 查看属性兼容性。
• 利用工具（如 VS Code 自动补全、PostCSS 自动添加浏览器前缀）提高开发效率。