CSS3 完全指南：从入门到精通

目录

1. CSS3 基础概念
2. CSS3 新特性概览
3. 选择器进阶
4. 盒模型与布局
5. Flexbox 弹性布局
6. Grid 网格布局
7. 变换与过渡
8. 动画
9. 响应式设计
10. 高级特性

1. CSS3 基础概念

1.1 什么是CSS3？

CSS3是CSS（层叠样式表）的最新版本，它带来了许多新特性，让网页设计更加灵活和强大。

1.2 CSS3 的引入方式

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

<!-- 内部样式表 -->
<style>
    body {
        background-color: #f0f0f0;
    }
</style>

<!-- 内联样式 -->
<div style="color: blue;">Hello CSS3</div>

2. CSS3 新特性概览

2.1 主要新增特性

/* 圆角边框 */
.rounded {
    border-radius: 10px;
}

/* 阴影效果 */
.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 渐变背景 */
.gradient {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* 透明度 */
.transparent {
    opacity: 0.8;
    background-color: rgba(255, 0, 0, 0.5);
}

/* 多背景 */
.multi-bg {
    background: 
        url('top-image.png') top center no-repeat,
        url('bottom-image.png') bottom center no-repeat,
        linear-gradient(to bottom, #fff, #f0f0f0);
}

3. 选择器进阶

3.1 属性选择器

/* 基础属性选择器 */
[title] { color: blue; }
[href="https://example.***"] { color: red; }

/* 包含特定值 */
[class~="featured"] { font-weight: bold; }

/* 以特定值开头 */
[href^="https"] { color: green; }

/* 以特定值结尾 */
[href$=".pdf"] { background: url('pdf-icon.png') no-repeat; }

/* 包含子串 */
[title*="hello"] { text-decoration: underline; }

3.2 伪类选择器

/* 结构性伪类 */
:first-child { margin-top: 0; }
:last-child { margin-bottom: 0; }
:nth-child(2n) { background-color: #f0f0f0; }
:nth-of-type(3) { color: red; }
:only-child { font-weight: bold; }

/* 状态伪类 */
:hover { background-color: #e0e0e0; }
:focus { outline: 2px solid blue; }
:active { transform: scale(0.98); }
:visited { color: purple; }

/* 表单伪类 */
:checked { background-color: green; }
:disabled { opacity: 0.5; }
:required { border-color: red; }
:valid { border-color: green; }
:invalid { border-color: red; }

3.3 伪元素选择器

/* 在元素前后插入内容 */
.quote::before {
    content: """;
    font-size: 2em;
    color: #***c;
}

.quote::after {
    content: """;
    font-size: 2em;
    color: #***c;
}

/* 首行和首字母 */
p::first-line {
    font-weight: bold;
    color: #333;
}

p::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 5px;
}

/* 选中文本样式 */
::selection {
    background-color: #b3d4fc;
    color: #000;
}

4. 盒模型与布局

4.1 Box-sizing

/* 传统盒模型 */
.content-box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 1px solid #***c;
    /* 实际宽度 = 300 + 40 + 2 = 342px */
}

/* IE盒模型 */
.border-box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 1px solid #***c;
    /* 实际宽度 = 300px */
}

4.2 新增盒模型属性

/* 圆角 */
.rounded-box {
    border-radius: 10px;
    /* 单独设置每个角 */
    border-top-left-radius: 20px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 5px;
}

/* 阴影 */
.shadow-box {
    /* box-shadow: x偏移 y偏移 模糊半径 扩散半径 颜色 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* 多重阴影 */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
        
    /* 内阴影 */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 边框图片 */
.border-image-box {
    border-image: url('border.png') 27 round;
    border-image-slice: 27;
    border-image-width: 27px;
    border-image-outset: 0;
    border-image-repeat: round;
}

5. Flexbox 弹性布局

5.1 Flex容器属性

/* Flex容器 */
.flex-container {
    display: flex;
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
    align-items: center; /* stretch | flex-start | flex-end | center | baseline */
    align-content: flex-start; /* 多行对齐 */
}

/* 简写属性 */
.flex-flow {
    display: flex;
    flex-flow: row wrap; /* flex-direction flex-wrap */
}

5.2 Flex项目属性

/* Flex项目 */
.flex-item {
    flex-grow: 1; /* 放大比例，默认0 */
    flex-shrink: 1; /* 缩小比例，默认1 */
    flex-basis: 200px; /* 基础大小 */
    
    /* 简写 */
    flex: 1 1 200px; /* flex-grow flex-shrink flex-basis */
    
    /* 单独对齐 */
    align-self: flex-end; /* auto | flex-start | flex-end | center | baseline | stretch */
    
    /* 排序 */
    order: 2; /* 默认0，数值越小越靠前 */
}

/* 常用Flex布局示例 */
/* 等分布局 */
.equal-columns {
    display: flex;
}
.equal-columns > * {
    flex: 1;
}

/* 圣杯布局 */
.holy-grail {
    display: flex;
    min-height: 100vh;
}
.holy-grail .main {
    flex: 1;
}
.holy-grail .sidebar {
    flex: 0 0 200px;
}

/* 垂直居中 */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

6. Grid 网格布局

6.1 Grid容器属性

/* Grid容器 */
.grid-container {
    display: grid;
    
    /* 定义列 */
    grid-template-columns: 200px 1fr 200px;
    /* 使用repeat */
    grid-template-columns: repeat(3, 1fr);
    /* 自适应列 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    
    /* 定义行 */
    grid-template-rows: 100px auto 100px;
    
    /* 间距 */
    grid-gap: 20px; /* 行列间距 */
    grid-row-gap: 20px;
    grid-column-gap: 10px;
    
    /* 命名网格区域 */
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
        
    /* 对齐 */
    justify-items: center; /* start | end | center | stretch */
    align-items: center;
    justify-content: space-between; /* 整个网格在容器中的对齐 */
    align-content: center;
}

/* Grid项目 */
.grid-item {
    /* 指定位置 */
    grid-column: 1 / 3; /* 从第1条线到第3条线 */
    grid-row: 2 / 4;
    
    /* 简写 */
    grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
    
    /* 使用命名区域 */
    grid-area: header;
    
    /* 单独对齐 */
    justify-self: end;
    align-self: start;
}

/* 实用Grid布局示例 */
/* 响应式卡片布局 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* 复杂布局 */
.***plex-layout {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "logo header header"
        "nav main aside"
        "nav footer footer";
    gap: 20px;
    height: 100vh;
}

.logo { grid-area: logo; }
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

7. 变换与过渡

7.1 Transform 变换

/* 2D变换 */
.transform-2d {
    /* 平移 */
    transform: translate(50px, 100px);
    transform: translateX(50px);
    transform: translateY(100px);
    
    /* 缩放 */
    transform: scale(1.5);
    transform: scaleX(2);
    transform: scaleY(0.5);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 倾斜 */
    transform: skew(10deg, 20deg);
    transform: skewX(10deg);
    transform: skewY(20deg);
    
    /* 组合变换 */
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
    
    /* 变换原点 */
    transform-origin: center center; /* 默认 */
    transform-origin: left top;
    transform-origin: 50% 50%;
}

/* 3D变换 */
.transform-3d {
    /* 开启3D空间 */
    transform-style: preserve-3d;
    
    /* 3D平移 */
    transform: translate3d(50px, 100px, 200px);
    transform: translateZ(200px);
    
    /* 3D旋转 */
    transform: rotate3d(1, 1, 0, 45deg);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    
    /* 透视 */
    perspective: 1000px;
    
    /* 透视原点 */
    perspective-origin: 50% 50%;
    
    /* 背面可见性 */
    backface-visibility: hidden;
}

/* 实用示例：卡片翻转 */
.card-flip {
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.card-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

7.2 Transition 过渡

/* 基础过渡 */
.transition-basic {
    /* 单个属性 */
    transition: width 0.3s ease;
    
    /* 多个属性 */
    transition: width 0.3s, height 0.3s, background-color 0.3s;
    
    /* 所有属性 */
    transition: all 0.3s ease;
    
    /* 完整语法 */
    transition-property: width, height;
    transition-duration: 0.3s, 0.5s;
    transition-timing-function: ease, linear;
    transition-delay: 0s, 0.1s;
}

/* 时间函数 */
.timing-functions {
    /* 预定义 */
    transition-timing-function: ease; /* 默认，慢-快-慢 */
    transition-timing-function: linear; /* 匀速 */
    transition-timing-function: ease-in; /* 慢-快 */
    transition-timing-function: ease-out; /* 快-慢 */
    transition-timing-function: ease-in-out; /* 慢-快-慢 */
    
    /* 步进 */
    transition-timing-function: steps(4, end);
    
    /* 贝塞尔曲线 */
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 实用示例：按钮悬停效果 */
.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

8. 动画

8.1 Keyframes 动画

/* 定义关键帧 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 多个关键帧 */
@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 使用动画 */
.animated-element {
    /* 简写 */
    animation: slideIn 1s ease-out forwards;
    
    /* 完整属性 */
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite; /* 或具体次数 */
    animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
    animation-fill-mode: both; /* none | forwards | backwards | both */
    animation-play-state: running; /* running | paused */
}

/* 复杂动画示例 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

.pulse-button {
    animation: pulse 2s infinite;
}

/* 加载动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 文字动画 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.typing-effect {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid black;
    animation: 
        typing 3.5s steps(40, end),
        blink 0.75s step-end infinite;
}

8.2 动画性能优化

/* 使用 transform 和 opacity 进行动画 */
.optimized-animation {
    /* 好的做法 - 使用 GPU 加速 */
    transform: translate3d(0, 0, 0); /* 开启硬件加速 */
    will-change: transform, opacity; /* 提示浏览器优化 */
    
    /* 避免动画 layout 属性 */
    /* 不好：width, height, padding, margin */
    /* 好：transform, opacity */
}

/* 减少重绘重排 */
.performance-animation {
    /* 使用 transform 替代 position */
    transform: translateX(100px); /* 好 */
    /* left: 100px; */  /* 避免 */
    
    /* 批量修改 */
    animation: ***plex-animation 1s;
}

@keyframes ***plex-animation {
    to {
        transform: translate(100px, 100px) scale(1.2) rotate(45deg);
        opacity: 0.8;
    }
}

9. 响应式设计

9.1 媒体查询

/* 基础媒体查询 */
/* 移动优先 */
.container {
    width: 100%;
    padding: 10px;
}

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

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

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

/* 复杂媒体查询 */
/* 横向和纵向 */
@media (orientation: portrait) {
    .sidebar {
        width: 100%;
    }
}

@media (orientation: landscape) {
    .sidebar {
        width: 300px;
    }
}

/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: 200px 100px;
    }
}

/* 打印样式 */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    @page {
        margin: 2cm;
    }
}

/* 组合查询 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .special-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

9.2 响应式单位

/* 视口单位 */
.viewport-units {
    /* 视口宽度的百分比 */
    width: 50vw; /* 50% of viewport width */
    
    /* 视口高度的百分比 */
    height: 100vh; /* 100% of viewport height */
    
    /* 视口较小维度的百分比 */
    font-size: 5vmin;
    
    /* 视口较大维度的百分比 */
    padding: 2vmax;
}

/* rem 和 em */
html {
    font-size: 16px; /* 1rem = 16px */
}

.rem-example {
    font-size: 1.5rem; /* 24px */
    padding: 2rem; /* 32px */
}

.em-example {
    font-size: 1.2em; /* 相对于父元素 */
    padding: 1em; /* 相对于当前元素的 font-size */
}

/* 响应式字体 */
.responsive-text {
    /* 基础大小 + 视口单位 */
    font-size: calc(16px + 1vw);
    
    /* 使用 clamp 限制范围 */
    font-size: clamp(16px, 4vw, 32px);
}

/* 容器查询（新特性） */
@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.container-query {
    container-type: inline-size;
    container-name: card-container;
}

9.3 响应式图片

/* 响应式图片 */
.responsive-image {
    max-width: 100%;
    height: auto;
}

/* 背景图片 */
.responsive-bg {
    background-image: url('small.jpg');
    background-size: cover;
    background-position: center;
}

@media (min-width: 768px) {
    .responsive-bg {
        background-image: url('medium.jpg');
    }
}

@media (min-width: 1200px) {
    .responsive-bg {
        background-image: url('large.jpg');
    }
}

/* 使用 image-set */
.retina-bg {
    background-image: image-set(
        url('image.jpg') 1x,
        url('image@2x.jpg') 2x
    );
}

/* 对象适配 */
.object-fit-example {
    width: 300px;
    height: 200px;
    object-fit: cover; /* contain | cover | fill | none | scale-down */
    object-position: center top;
}

10. 高级特性

10.1 CSS变量（自定义属性）

/* 定义变量 */
:root {
    /* 颜色主题 */
    --primary-color: #3498db;
    --secondary-color: #2e***71;
    --danger-color: #e74c3c;
    --text-color: #333;
    --bg-color: #f5f5f5;
    
    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* 字体系统 */
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    
    /* 动画 */
    --transition-speed: 0.3s;
    --animation-speed: 1s;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-speed) ease;
}

/* 带默认值 */
.element {
    color: var(--custom-color, #000); /* 如果 --custom-color 未定义，使用 #000 */
}

/* JavaScript 操作 */
/*
// 获取变量值
const primaryColor = get***putedStyle(document.documentElement)
    .getPropertyValue('--primary-color');

// 设置变量值
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
*/

/* 主题切换示例 */
[data-theme="dark"] {
    --text-color: #fff;
    --bg-color: #1a1a1a;
    --primary-color: #4fc3f7;
}

/* 响应式变量 */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --spacing-md: 12px;
    }
}

10.2 滤镜和混合模式

/* 滤镜效果 */
.filter-effects {
    /* 模糊 */
    filter: blur(5px);
    
    /* 亮度 */
    filter: brightness(1.5);
    
    /* 对比度 */
    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(0 4px 6px rgba(0, 0, 0, 0.1));
    
    /* 组合滤镜 */
    filter: brightness(1.2) contrast(1.1) saturate(1.3);
}

/* 背景滤镜 */
.backdrop-filter {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

/* 混合模式 */
.blend-modes {
    /* 背景混合 */
    background-blend-mode: multiply;
    
    /* 元素混合 */
    mix-blend-mode: screen;
    
    /* 常用混合模式 */
    mix-blend-mode: normal;
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
}

/* 实用示例：图片效果 */
.image-overlay {
    position: relative;
    overflow: hidden;
}

.image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
    mix-blend-mode: multiply;
}

.image-overlay img {
    transition: all 0.3s ease;
}

.image-overlay:hover img {
    filter: brightness(1.2) saturate(1.3);
    transform: scale(1.05);
}

10.3 形状和裁剪

/* 裁剪路径 */
.clip-path-examples {
    /* 基础形状 */
    clip-path: circle(50%);
    clip-path: ellipse(130px 140px at 10% 20%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    
    /* 三角形 */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    
    /* 六边形 */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    
    /* 星形 */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 形状外部 */
.shape-outside-example {
    float: left;
    width: 200px;
    height: 200px;
    shape-outside: circle(50%);
    clip-path: circle(50%);
    margin: 20px;
}

/* 遮罩 */
.mask-example {
    mask-image: linear-gradient(to bottom, transparent, black);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
    
    /* 使用图片作为遮罩 */
    mask-image: url('mask.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* SVG 裁剪 */
.svg-clip {
    clip-path: url(#my-clip-path);
}

10.4 滚动效果

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 滚动吸附 */
.scroll-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
}

.scroll-item {
    scroll-snap-align: center;
    flex: 0 0 100%;
}

/* 视差滚动 */
.parallax-container {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.parallax-background {
    transform: translateZ(-1px) scale(2);
}

.parallax-foreground {
    transform: translateZ(0);
}

/* 滚动条样式 */
.custom-scrollbar {
    overflow: auto;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 滚动时触发动画 */
.scroll-animation {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease;
}

.scroll-animation.in-view {
    opacity: 1;
    transform: translateY(0);
}

10.5 现代布局技巧

/* Aspect Ratio */
.aspect-ratio-box {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #f0f0f0;
}

/* Container Queries */
@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

.container {
    container-type: inline-size;
}

/* Subgrid */
.grid-parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-child {
    display: grid;
    grid-template-columns: subgrid;
}

/* 逻辑属性 */
.logical-properties {
    /* 替代 margin-left/right */
    margin-inline: auto;
    
    /* 替代 padding-top/bottom */
    padding-block: 20px;
    
    /* 替代 width */
    inline-size: 300px;
    
    /* 替代 height */
    block-size: 200px;
    
    /* 边框 */
    border-inline-start: 2px solid #333;
    border-block-end: 1px solid #***c;
}

/* 多列布局 */
.multi-column {
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #***c;
}

.multi-column h2 {
    column-span: all;
}

/* 文字排版增强 */
.typography {
    /* 连字符 */
    hyphens: auto;
    
    /* 首字母大写 */
    text-transform: capitalize;
    
    /* 文字装饰 */
    text-decoration: underline wavy #ff6b6b;
    text-underline-offset: 3px;
    
    /* 文字阴影 */
    text-shadow: 
        3px 3px 0 #000,
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

总结

CSS3 为现代网页设计提供了强大的工具和特性。从基础的选择器到复杂的动画和布局系统，CSS3 让开发者能够创建出美观、响应式和高性能的网页。

学习建议

1. 循序渐进：从基础选择器和盒模型开始，逐步学习高级特性
2. 实践为主：通过实际项目来巩固所学知识
3. 保持更新：CSS 规范在不断发展，要关注新特性
4. 性能意识：了解不同属性对性能的影响
5. 浏览器兼容：使用 Can I Use 等工具检查兼容性

推荐资源

• MDN Web Docs - CSS
• CSS Tricks
• Can I Use
• CodePen（查看和分享代码示例）
• CSS Grid Garden（学习 Grid 布局的游戏）
• Flexbox Froggy（学习 Flexbox 的游戏）