【Web前端】CSS3核心知识点梳理

1. CSS3 概述

CSS3 是 Cascading Style Sheets 的第三个主要版本，是对传统 CSS 标准的重大升级。

1.1 模块化结构

1）将庞大复杂的规范划分为多个独立模块。

2）包括选择器模块（Selectors Level 3）、盒模型模块（Flexbox/Grid）、背景与边框模块（圆角、阴影）、文字特效模块（text-shadow）等。

3）各模块可独立开发和更新，提高了标准演进效率。

1.2 向后兼容性

1）设计理念强调向下兼容。

2）新特性会优雅降级，不影响旧浏览器显示基本样式。

3）采用渐进增强（Progressive Enhancement）策略。

1.3 丰富的视觉效果和动画功能

1）过渡（Transition）：实现属性变化的平滑过渡效果。

2）变换（Transform）：支持2D/3D旋转、缩放、位移等效果。

3）动画（Animation）：通过关键帧控制复杂动画序列。

4）新增滤镜（Filter）、混合模式（Blend Mode）等特效。

5）典型应用：悬停效果、轮播图、加载动画等。

1.4 响应式设计支持

1）媒体查询（Media Queries）实现设备适配。

2）弹性盒布局（Flexbox）和栅格布局（Grid）提供灵活的页面排版。

3）视口单位（vw/vh）实现比例缩放。

4）典型应用：跨设备网页、移动优先设计、自适应UI等。

1.5 其他

1）多列布局（Multi-column）。

2）自定义字体（@font-face）。

3）变量（CSS Variables）。

4）计算函数（calc()）。

5）形状绘制（clip-path）等创新功能。

2. 选择器增强

2.1 属性选择器

/* 属性值匹配 */
input[type="text"] { /* 精确匹配 */ }
a[href*="example"] { /* 包含指定值 */ }
a[href^="https"] { /* 以指定值开头 */ }
a[href$=".pdf"] { /* 以指定值结尾 */ }
div[class~="box"] { /* 包含指定单词（空格分隔） */ }
div[class|="nav"] { /* 以指定值开头或后面跟连字符 */ }

2.2 结构伪类选择器

/* 子元素选择 */
:first-child :last-child :only-child
:nth-child(n) :nth-last-child(n)
:nth-of-type(n) :nth-last-of-type(n)
:first-of-type :last-of-type :only-of-type

/* 示例 */
li:nth-child(2n) { /* 偶数行 */ }
tr:nth-child(odd) { /* 奇数行 */ }
p:first-of-type { /* 同类型第一个 */ }

2.3 UI 元素状态伪类

:enabled :disabled :checked
:required :optional :valid :invalid
:in-range :out-of-range
:read-only :read-write

/* 示例 */
input:valid { border-color: green; }
input:invalid { border-color: red; }

2.4 其他新伪类

:root { /* 文档根元素 */ }
:empty { /* 没有子元素的元素 */ }
:target { /* 当前活动的锚点目标 */ }
:not(selector) { /* 否定伪类 */ }

/* 示例 */
div:not(.special) { opacity: 0.8; }

3. 盒模型增强

3.1 box-sizing

/* 内容盒模型（默认） */
box-sizing: content-box; /* width/height = 内容宽度 */

/* 边框盒模型 */
box-sizing: border-box; /* width/height = 内容+padding+border */

3.2 圆角边框 (border-radius)

/* 基本用法 */
border-radius: 10px;
border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */

/* 椭圆圆角 */
border-radius: 50px / 25px;

/* 单独设置 */
border-top-left-radius: 10px;
border-bottom-right-radius: 15px 20px;

3.3 盒子阴影 (box-shadow)

/* 语法：box-shadow: h-shadow v-shadow blur spread color inset; */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 0 0 10px #000; /* 四周阴影 */
box-shadow: inset 0 0 10px #000; /* 内阴影 */
box-shadow: 2px 2px 5px red, -2px -2px 5px blue; /* 多重阴影 */

3.4 边框图像 (border-image)

/* 语法：border-image: source slice width outset repeat; */
border-image: url(border.png) 30 round;
border-image: linear-gradient(45deg, red, blue) 1;

4. 背景与边框增强

4.1 多背景图片

background: 
    url(bg1.png) top left no-repeat,
    url(bg2.png) bottom right no-repeat,
    linear-gradient(to bottom, #fff, #000);

4.2 background 新属性

background-size: cover | contain | 100px 200px;
background-clip: border-box | padding-box | content-box;
background-origin: border-box | padding-box | content-box;

/* 示例 */
background: url(image.jpg) no-repeat center;
background-size: cover;

5. 颜色与透明度

5.1 新颜色格式

/* RGBA - 带透明度的RGB */
color: rgba(255, 0, 0, 0.5); /* 红色，50%透明度 */

/* HSL - 色相、饱和度、亮度 */
color: hsl(120, 100%, 50%); /* 纯绿色 */
color: hsla(120, 100%, 50%, 0.3); /* 带透明度 */

/* 透明度属性 */
opacity: 0.5; /* 元素整体透明度 */

6. 文字效果

6.1 文字阴影 (text-shadow)

/* 语法：text-shadow: h-shadow v-shadow blur color; */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-shadow: 0 0 10px #fff, 0 0 20px #ff00de; /* 发光效果 */

6.2 文字渲染

text-overflow: ellipsis; /* 文字溢出显示省略号 */
word-wrap: break-word; /* 长单词换行 */
word-break: break-all; /* 任意位置换行 */

/* @font-face 自定义字体 */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
}

7. 2D/3D 变换

7.1 2D 变换

/* 位移 */
transform: translate(100px, 50px);
transform: translateX(100px);
transform: translateY(50px);

/* 旋转 */
transform: rotate(45deg);

/* 缩放 */
transform: scale(1.5);
transform: scaleX(2) scaleY(0.5);

/* 倾斜 */
transform: skew(30deg, 10deg);

/* 变换原点 */
transform-origin: left top;

/* 多重变换 */
transform: translate(100px, 50px) rotate(45deg) scale(1.2);

7.2 3D 变换

/* 3D位移、旋转、缩放 */
transform: translate3d(100px, 50px, 20px);
transform: rotateX(45deg) rotateY(30deg);
transform: scale3d(1, 1, 1.5);

/* 透视 */
perspective: 500px;
transform-style: preserve-3d;
backface-visibility: hidden;

8. 过渡 (Transitions)

8.1 基本语法

/* 简写：transition: property duration timing-function delay; */
transition: all 0.3s ease-in-out 0.1s;

/* 详细属性 */
transition-property: width, height; /* 或 all */
transition-duration: 0.3s;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
transition-delay: 0.1s;

/* 示例 */
button {
    background: blue;
    transition: background 0.3s, transform 0.2s;
}
button:hover {
    background: red;
    transform: scale(1.1);
}

9. 动画 (Animations)

9.1 关键帧定义

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

9.2 动画应用

/* 简写：animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: slidein 1s ease-in-out;

/* 详细属性 */
animation-name: slidein;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite | 3;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-mode: none | forwards | backwards | both;
animation-play-state: running | paused;

/* 示例 */
.box {
    animation: bounce 2s infinite alternate;
}

10. 弹性盒子布局 (Flexbox)

10.1 容器属性

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    align-items: stretch | flex-start | flex-end | center | baseline;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
    gap: 10px; /* 项目间距 */
}

10.2 项目属性

.item {
    order: 0; /* 排列顺序 */
    flex-grow: 0; /* 放大比例 */
    flex-shrink: 1; /* 缩小比例 */
    flex-basis: auto; /* 初始大小 */
    flex: 0 1 auto; /* 简写：grow shrink basis */
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

11. 网格布局 (Grid)

11.1 容器属性

.container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 50px 1fr 30px;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
    gap: 10px;
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    place-items: center; /* align和justify的简写 */
}

11.2 项目属性

.item {
    grid-column: 1 / 3; /* 起始线 / 结束线 */
    grid-row: 1 / span 2;
    grid-area: header; /* 区域名称 */
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

12. 媒体查询 (Media Queries)

12.1 响应式断点

/* 移动设备优先 */
.container { width: 100%; }

/* 平板 */
@media (min-width: 768px) {
    .container { width: 750px; }
}

/* 桌面 */
@media (min-width: 992px) {
    .container { width: 970px; }
}

/* 大桌面 */
@media (min-width: 1200px) {
    .container { width: 1170px; }
}

12.2 其他媒体特性

/* 设备方向 */
@media (orientation: landscape) { /* 横屏 */ }
@media (orientation: portrait) { /* 竖屏 */ }

/* 分辨率 */
@media (min-resolution: 2dppx) { /* 高分辨率屏幕 */ }

/* 打印样式 */
@media print { /* 打印时的样式 */ }

13. 其他重要特性

13.1 多列布局

.multi-column {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #***c;
}

13.2 滤镜效果 (filter)

.filtered {
    filter: blur(5px);
    filter: brightness(150%);
    filter: contrast(200%);
    filter: grayscale(100%);
    filter: hue-rotate(90deg);
    filter: invert(100%);
    filter: opacity(50%);
    filter: saturate(200%);
    filter: sepia(100%);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

13.3 混合模式

.blend {
    background-blend-mode: multiply; /* 背景图与背景色混合 */
    mix-blend-mode: screen; /* 元素与背后内容混合 */
}

14. CSS3 最佳实践

14.1 模块化与组织

1）文件结构组织

推荐采用模块化的CSS组织方式：

① reset.css 或 normalize.css：重置浏览器默认样式。

② base.css：基础样式（字体、颜色等全局变量）。

③ layout.css：布局相关样式。

④ modules/：组件样式（按钮、表单等）。

⑤ pages/：页面特定样式。

⑥ utilities.css：工具类（辅助类）。

2）命名规范

推荐使用BEM(Block, Element, Modifier)命名法：

/* 块 */
.form {}

/* 元素 */
.form__input {}
.form__label {}

/* 修饰符 */
.form__input--disabled {}
.form--horizontal {}

14.2 性能优化

1）选择器效率

① 避免深层嵌套选择器（不超过3层）。

② 避免通用选择器*。

③ 尽量减少属性选择器[attr=value]的使用。

④ 优先使用类选择器而非标签选择器。

2）渲染性能

① 减少重绘和回流：

• 使用transform和opacity实现动画。

• 避免频繁修改width,height,top,left等属性。

• 使用will-change属性提前告知浏览器元素将会变化。

② 合理使用硬件加速：

.element {
  transform: translateZ(0);
}

14.3 现代CSS特性

1）变量与自定义属性

使用CSS变量实现主题切换：

:root {
  --primary-color: #4285f4;
  --secondary-color: #34a853;
  --font-family: 'Roboto', sans-serif;
}

.element {
  color: var(--primary-color);
  font-family: var(--font-family);
}

2）Flexbox与Grid布局

① Flexbox适用于一维布局（单行或单列）。

② Grid适用于二维布局（行列同时控制）。

/* Flexbox示例 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

3）响应式设计

① 使用媒体查询实现响应式：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

② 使用clamp()函数实现流畅的响应式尺寸：

.element {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

14.4 兼容性与渐进增强

1）特性检测

使用@supports规则检测CSS特性支持：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}

2）渐进增强策略

① 先为所有浏览器提供基础样式。

② 再为现代浏览器提供增强功能。

③ 使用Autoprefixer自动添加厂商前缀。

14.5 维护与可扩展性

1）注释与文档

/**
 * 主导航样式
 *
 * 主要功能：
 * - 水平导航菜单
 * - 响应式折叠
 * - 支持多级菜单
 */
.nav {
  /* ... */
}

2）工具与技术栈

① 使用CSS预处理器（Sass/Less）提高可维护性。

② 使用PostCSS处理现代化CSS。

③ 采用CSS-in-JS方案（如styled-***ponents）实现组件化样式隔离。