目录
一、CSS3 简介
二、CSS3 基础知识点
（一）选择器
1. 基本选择器
2. 伪类选择器
3. 伪元素选择器
（二）颜色和字体
1. 颜色格式
2. Web 字体
（三）边框和背景
1. 圆角边框
2. 渐变背景
三、CSS3 高级知识点
（一）动画和过渡
1. 动画
2. 过渡
（二）媒体查询
（三）Flexbox 和 Grid 布局
1. Flexbox
2. Grid
四、CSS3 预处理器
（一）Sass
1. 安装 Sass
2. 编写 Sass 文件
3. 编译 Sass 文件
（二）Less
1. 安装 Less
2. 编写 Less 文件
3. 编译 Less 文件
五、CSS 框架
（一）Bootstrap
1. 引入 Bootstrap
2. 使用 Bootstrap 组件
（二）Tailwind CSS
1. 引入 Tailwind CSS
2. 使用 Tailwind CSS
六、高级特性
（一）响应式设计
（二）CSS 形状与剪切路径
（三）CSS 计数器
七、总结
CSS3 是现代网页设计的核心技术之一，为开发者提供了丰富的视觉效果和强大的布局能力。本文将详细介绍 CSS3 的基本用法、核心特性、高级技巧以及实战应用，帮助你从基础到进阶，全面掌握 CSS3 的开发技能。
一、CSS3 简介
CSS3 是 CSS2 的升级版本，引入了许多新特性，如选择器、颜色、字体、动画、过渡、媒体查询等。这些特性不仅提升了网页的视觉效果，还极大地提高了开发效率。
二、CSS3 基础知识点
（一）选择器
CSS3 提供了多种选择器，包括基本选择器、伪类选择器和伪元素选择器。
1. 基本选择器
标签选择器：选择特定标签的元素。
p {
color: blue;
}
类选择器：选择具有特定类名的元素。
.red-text {
color: red;
}
ID 选择器：选择具有特定 ID 的元素。
#main-heading {
font-size: 24px;
}
2. 伪类选择器
:hover：鼠标悬停时的样式。
a:hover {
color: green;
}
:active：元素被激活时的样式。
button:active {
background-color: gray;
}
3. 伪元素选择器
::before 和 ::after：在元素前后插入内容。
p::before {
content: "• ";
color: red;
}
（二）颜色和字体
CSS3 支持更多的颜色格式，如 RGBA 和 HSLA，还增加了对 Web 字体的支持。
1. 颜色格式
RGBA：支持透明度。
body {
background-color: rgba(255, 255, 255, 0.8);
}
HSLA：基于色相、饱和度和亮度的颜色表示。
div {
color: hsla(120, 100%, 50%, 0.5);
}
2. Web 字体
使用 @font-face 引入自定义字体。
@font-face {
font-family: 'MyFont';
src: url('path/to/font.woff') format('woff');
}
body {
font-family: 'MyFont', sans-serif;
}
（三）边框和背景
CSS3 提供了更丰富的边框样式，如圆角边框和渐变背景。
1. 圆角边框
div {
border: 2px solid blue;
border-radius: 10px;
}
2. 渐变背景
body {
background-image: linear-gradient(to right, red, yellow);
}
三、CSS3 高级知识点
（一）动画和过渡
CSS3 提供了 @keyfram