你想要学习CSS3的常用知识点和使用方法，我会从核心特性入手，为你梳理一份通俗易懂、实用性强的CSS3入门教程，帮助你快速掌握关键技能。
CSS3 核心常用特性教程
CSS3是CSS的最新版本，新增了许多强大的特性，让网页样式开发更高效、效果更丰富。下面我会按模块讲解最常用的特性，并提供可直接运行的代码示例。
一、CSS3 选择器（简化样式选择）
CSS3新增了很多灵活的选择器，让你不用依赖class/id就能精准选中元素。
常用选择器示例：
/* 1. 属性选择器：选中有特定属性的元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 8px;
}
/* 2. 伪类选择器：状态/位置选择 */
/* :nth-child(n)：选中父元素的第n个子元素 */
ul li:nth-child(2) {
color: red; /* 第二个li变红 */
}
/* :hover：鼠标悬停 */
button:hover {
background: #007bff;
color: white;
}
/* :first-child/:last-child：第一个/最后一个子元素 */
ul li:first-child {
font-weight: bold;
}
/* 3. 伪元素：创建虚拟元素（必须加content） */
p::before {
content: "提示：";
color: #ff6700;
}
p::after {
content: "【完】";
font-size: 12px;
}
二、边框与圆角（border-radius）
这是CSS3最常用的特性之一，轻松实现圆角效果，替代传统的图片圆角。
/* 基础用法：四个角统一圆角 */
.box {
width: 200px;
height: 100px;
border: 2px solid #333;
border-radius: 10px; /* 数值越大，圆角越明显 */
}
/* 进阶：分别设置四个角（左上、右上、右下、左下） */
.circle {
width: 100px;
height: 100px;
background: #007bff;
border-radius: 50%; /* 50% 实现正圆形（宽高需相等） */
}
/* 边框图片（border-image）：自定义边框样式 */
.border-img {
width: 200px;
height: 100px;
border: 10px solid transparent;
border-image: url("border.png") 30 round; /* 图片、裁剪值、平铺方式 */
}
三、阴影效果（text-shadow / box-shadow）
1. 文字阴影
.text-shadow {
font-size: 30px;
/* 水平偏移 垂直偏移 模糊半径 颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
2. 盒子阴影
.box-shadow {
width: 200px;
height: 100px;
background: white;
/* 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 内外阴影（inset） */
box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.2);
/* 内阴影示例 */
/* box-shadow: inset 2px 2px 5px #ccc; */
}
四、渐变（Gradients）
CSS3渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient），替代渐变图片。
1. 线性渐变
.linear-gradient {
width: 300px;
height: 100px;
/* 方向（to right：从左到右）、起始色、结束色 */
background: linear-gradient(to right, #ff6700, #ffb800);
/* 自定义角度：45deg 从左下到右上 */
/* background: linear-gradient(45deg, #007bff, #00c6ff); */
/* 多色渐变 */
/* background: linear-gradient(to bottom, red, yellow, green); */
}
2. 径向渐变
.radial-gradient {
width: 200px;
height: 200px;
/* 从中心向外，起始色、结束色 */
background: radial-gradient(#ff6700, #ff3300);
/* 固定形状（circle）+ 大小 */
/* background: radial-gradient(circle 100px at center, #007bff, #000); */
}
五、过渡（transition）
实现元素样式的平滑过渡（无需JS），常用在hover、active等状态切换。
.transition-box {
width: 100px;
height: 100px;
background: #007bff;
/* 过渡属性（all：所有属性）、时长、速度曲线、延迟 */
transition: all 0.3s ease 0.1s;
}
.transition-box:hover {
width: 200px;
background: #ff6700;
transform: rotate(10deg); /* 配合变形使用 */
}
六、变形（transform）
对元素进行旋转、缩放、平移、倾斜等操作，不影响其他元素布局。
.transform-box {
width: 100px;
height: 100px;
background: #ff6700;
margin: 50px;
/* 平移：translate(X, Y) */
/* transform: translate(50px, 20px); */
/* 旋转：rotate(角度) */
/* transform: rotate(15deg); */
/* 缩放：scale(X, Y) */
/* transform: scale(1.2); */
/* 倾斜：skew(角度X, 角度Y) */
/* transform: skew(10deg, 5deg); */
/* 组合变形 */
transform: translate(30px) rotate(10deg) scale(1.1);
}
七、动画（animation）
比transition更强大，可实现多关键帧、循环的动画效果。
/* 1. 定义动画关键帧 */
@keyframes move {
0% { /* 起始状态 */
transform: translateX(0);
background: #007bff;
}
50% { /* 中间状态 */
transform: translateX(200px);
background: #ff6700;
}
100% { /* 结束状态 */
transform: translateX(0);
background: #007bff;
}
}
/* 2. 应用动画 */
.animation-box {
width: 100px;
height: 100px;
/* 动画名称 时长 速度曲线 延迟 循环次数 方向 */
animation: move 3s ease 0.5s infinite alternate;
}
八、弹性布局（Flex）
CSS3的Flex布局是目前主流的页面布局方式，解决传统浮动布局的痛点。
/* 父容器设置为flex */
.flex-container {
width: 400px;
height: 200px;
border: 1px solid #ccc;
display: flex; /* 核心属性 */
/* 子元素水平排列方式 */
justify-content: space-between; /* 两端对齐 */
/* justify-content: center; 居中 */
/* justify-content: flex-start; 左对齐（默认） */
/* 子元素垂直排列方式 */
align-items: center; /* 垂直居中 */
/* align-items: flex-start; 顶部对齐 */
/* 换行 */
/* flex-wrap: wrap; */
}
/* 子元素 */
.flex-item {
width: 80px;
height: 80px;
background: #007bff;
margin: 5px;
/* 占比（flex: 1 表示均分剩余空间） */
/* flex: 1; */
}
九、媒体查询（响应式布局核心）
实现不同屏幕尺寸下的样式适配，是响应式网页的基础。
/* 基础样式（默认） */
.container {
width: 960px;
margin: 0 auto;
}
/* 屏幕宽度≤768px（手机端） */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
}
/* 屏幕宽度在769px-1200px之间（平板/小屏电脑） */
@media (min-width: 769px) and (max-width: 1200px) {
.container {
width: 750px;
}
}
总结
- 核心视觉特性：
border-radius（圆角）、box-shadow/text-shadow（阴影）、linear-gradient/radial-gradient（渐变）是美化元素的高频用法，替代传统图片方案。 - 交互与动效：
transition（简单过渡）和animation（复杂动画）实现无JS动效，transform（变形）配合使用效果更佳。 - 布局核心：Flex布局（
display: flex）是现代网页布局的首选，媒体查询（@media）是实现响应式适配的关键，二者结合可适配不同设备。
这些是CSS3最常用的核心知识点，建议你把示例代码复制到HTML文件中实际运行，修改参数观察效果，能更快掌握。如果想深入学习某一个特性（比如Grid布局、滤镜效果），可以告诉我，我会补充更详细的内容。
