本指南包含 CSS3 的核心特性、详细注释和实例代码，帮助您快速学习 CSS3。
/* CSS 规则由选择器和声明块组成 */
选择器 {
属性1: 值1;
属性2: 值2;
/* 更多属性... */
}
/* 示例 */
h1 {
color: red;
font-size: 24px;
}
/* 多个选择器可以共享同一组声明 */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}
/* 注释：CSS 注释以 /* 开始，以 */ 结束 */<!-- 1. 内联样式：直接在元素上使用 style 属性 -->
<div style="color: red; font-size: 16px;">内联样式</div>
<!-- 2. 内部样式：在 <head> 标签内使用 <style> 标签 -->
<style>
div {
color: blue;
font-size: 14px;
}
</style>
<!-- 3. 外部样式：使用 <link> 标签引入外部 CSS 文件 -->
<link rel="stylesheet" href="styles.css">/* 带有浏览器前缀的 CSS3 属性 */
.box {
-webkit-border-radius: 5px; /* Chrome, Safari, Opera */
-moz-border-radius: 5px; /* Firefox */
-ms-border-radius: 5px; /* IE */
border-radius: 5px; /* 标准语法 */
}/* 元素选择器：选择所有指定元素 */
p {
color: blue;
}
/* ID 选择器：选择具有指定 ID 的元素 */
#header {
background-color: #f0f0f0;
}
/* 类选择器：选择具有指定类的元素 */
.container {
width: 100%;
}
/* 通配符选择器：选择所有元素 */
* {
margin: 0;
padding: 0;
}/* 后代选择器：选择指定元素的所有后代元素 */
div p {
color: red;
}
/* 子元素选择器：选择指定元素的直接子元素 */
div > p {
color: green;
}
/* 相邻兄弟选择器：选择指定元素的下一个兄弟元素 */
div + p {
color: blue;
}
/* 通用兄弟选择器：选择指定元素的所有后续兄弟元素 */
div ~ p {
color: purple;
}/* 链接伪类 */
a:link { color: blue; } /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; } /* 鼠标悬停的链接 */
a:active { color: green; } /* 活动链接 */
/* 结构伪类 */
li:first-child { color: red; } /* 第一个子元素 */
li:last-child { color: blue; } /* 最后一个子元素 */
li:nth-child(2) { color: green; } /* 第二个子元素 */
li:nth-child(even) { background-color: #f0f0f0; } /* 偶数位置的子元素 */
/* 表单伪类 */
input:focus { border: 2px solid blue; } /* 获得焦点的输入框 */
input:required { background-color: #fff3cd; } /* 必填项 */
input:valid { border: 2px solid green; } /* 有效值 */
input:invalid { border: 2px solid red; } /* 无效值 *//* ::before：在元素内容前插入内容 */
p::before {
content: "前缀：";
color: red;
}
/* ::after：在元素内容后插入内容 */
p::after {
content: "后缀";
color: blue;
}
/* ::first-letter：选择元素的第一个字母 */
p::first-letter {
font-size: 2em;
color: red;
}
/* ::first-line：选择元素的第一行 */
p::first-line {
font-weight: bold;
color: blue;
}
/* ::selection：选择用户选中的文本 */
p::selection {
background-color: yellow;
color: black;
}第一个段落
第二个段落
第三个段落
嵌套的段落
/* 标准盒模型：width/height 只包括内容区域 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
/* 实际宽度 = width + padding-left + padding-right + border-left + border-right */
/* 实际高度 = height + padding-top + padding-bottom + border-top + border-bottom */
}/* 怪异盒模型：width/height 包括内容区域、内边距和边框 */
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
/* 实际宽度 = width */
/* 实际高度 = height */
}两个盒子的 width 和 height 都是 100px，但实际大小不同。
/* 边框样式 */
.box {
/* 简写：边框宽度 边框样式 边框颜色 */
border: 2px solid red;
/* 单独设置 */
border-width: 2px;
border-style: solid; /* solid, dashed, dotted, double, groove, ridge, inset, outset */
border-color: red;
/* 圆角边框 */
border-radius: 5px; /* 四个角都为 5px */
border-top-left-radius: 10px; /* 左上角圆角 */
border-top-right-radius: 5px; /* 右上角圆角 */
border-bottom-left-radius: 15px; /* 左下角圆角 */
border-bottom-right-radius: 20px; /* 右下角圆角 */
/* 边框阴影 */
box-shadow: 5px 5px 10px rgba(0,0,0,0.3); /* 水平偏移 垂直偏移 模糊半径 颜色 */
box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.3); /* 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 */
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.3); /* 内阴影 */
}
/* 边框图片 */
.box {
border: 10px solid transparent;
border-image: url(border.png) 30 round;
border-image-slice: 30;
border-image-width: 10px;
border-image-outset: 0;
border-image-repeat: round;
}/* 背景颜色 */
.box {
background-color: #f0f0f0;
}
/* 背景图片 */
.box {
background-image: url(background.jpg);
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-position: center center; /* 水平位置 垂直位置 */
background-size: cover; /* auto, length, cover, contain */
background-attachment: fixed; /* scroll, fixed, local */
/* 背景简写 */
background: #f0f0f0 url(background.jpg) no-repeat center center / cover fixed;
}
/* 多背景 */
.box {
background:
url(top-bg.png) top center no-repeat,
url(bottom-bg.png) bottom center no-repeat,
#f0f0f0;
}
/* 背景渐变 */
.box {
/* 线性渐变 */
background: linear-gradient(to right, red, blue); /* 方向 起始颜色 结束颜色 */
background: linear-gradient(45deg, red, blue, green); /* 角度 颜色1 颜色2 颜色3 */
/* 径向渐变 */
background: radial-gradient(circle, red, blue); /* 形状 起始颜色 结束颜色 */
background: radial-gradient(circle at center, red, blue); /* 形状 位置 颜色1 颜色2 */
/* 重复渐变 */
background: repeating-linear-gradient(45deg, red, blue 10%, green 20%);
background: repeating-radial-gradient(circle, red, blue 10%, green 20%);
}/* 字体属性 */
.text {
font-family: "Arial", sans-serif; /* 字体系列 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字重：normal, bold, 100-900 */
font-style: italic; /* 字体样式：normal, italic, oblique */
font-variant: small-caps; /* 字体变体：normal, small-caps */
/* 字体简写 */
font: italic small-caps bold 16px/1.5 "Arial", sans-serif; /* 样式 变体 字重 大小/行高 字体系列 */
}
/* Web 字体 */
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2"),
url("myfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}/* 文本颜色 */
.text {
color: #333; /* 十六进制颜色 */
color: rgb(51, 51, 51); /* RGB 颜色 */
color: rgba(51, 51, 51, 0.8); /* RGBA 颜色（带透明度） */
color: hsl(0, 0%, 20%); /* HSL 颜色 */
color: hsla(0, 0%, 20%, 0.8); /* HSLA 颜色（带透明度） */
}
/* 文本对齐 */
.text {
text-align: left; /* left, right, center, justify */
text-align-last: justify; /* 最后一行对齐方式 */
}
/* 文本装饰 */
.text {
text-decoration: none; /* none, underline, overline, line-through */
text-decoration-color: red; /* 装饰线颜色 */
text-decoration-style: dashed; /* 装饰线样式：solid, dashed, dotted, wavy */
text-decoration-thickness: 2px; /* 装饰线厚度 */
/* 文本装饰简写 */
text-decoration: underline red dashed 2px;
}
/* 文本转换 */
.text {
text-transform: none; /* none, uppercase, lowercase, capitalize */
}
/* 文本间距 */
.text {
letter-spacing: 2px; /* 字母间距 */
word-spacing: 4px; /* 单词间距 */
line-height: 1.5; /* 行高 */
text-indent: 20px; /* 首行缩进 */
}
/* 文本阴影 */
.text {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 水平偏移 垂直偏移 模糊半径 颜色 */
text-shadow: 2px 2px 4px red, -2px -2px 4px blue; /* 多个阴影 */
}
/* 文本溢出 */
.text {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
/* 文本换行 */
.text {
word-wrap: break-word; /* 允许长单词换行 */
word-break: break-all; /* 允许在单词内换行 */
hyphens: auto; /* 自动连字符 */
}/* 转换属性 */
.box {
/* 2D 转换 */
transform: translate(10px, 20px); /* 平移 */
transform: rotate(45deg); /* 旋转 */
transform: scale(1.5); /* 缩放 */
transform: skew(10deg, 5deg); /* 倾斜 */
/* 组合转换 */
transform: translate(10px, 20px) rotate(45deg) scale(1.5);
/* 3D 转换 */
transform: perspective(1000px) rotateX(45deg) rotateY(45deg);
/* 转换原点 */
transform-origin: center center; /* 默认为元素中心 */
transform-origin: top left; /* 左上角 */
}
/* 常用 2D 转换函数 */
translate(x, y): 平移
rotate(angle): 旋转
scale(x, y): 缩放
skew(x-angle, y-angle): 倾斜
matrix(n,n,n,n,n,n): 矩阵转换
/* 常用 3D 转换函数 */
translate3d(x, y, z): 3D 平移
rotate3d(x, y, z, angle): 3D 旋转
scale3d(x, y, z): 3D 缩放
perspective(n): 透视/* 过渡属性 */
.box {
/* 简写：过渡属性 过渡时间 过渡函数 延迟时间 */
transition: all 0.3s ease 0s;
/* 单独设置 */
transition-property: width, height, background-color; /* 要过渡的属性 */
transition-duration: 0.3s; /* 过渡时间 */
transition-timing-function: ease; /* 过渡函数：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) */
transition-delay: 0s; /* 延迟时间 */
}
/* 当元素状态改变时（如 hover），过渡效果会自动应用 */
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}/* 定义关键帧 */
@keyframes myAnimation {
0% { /* 开始状态 */
background-color: red;
transform: translateX(0);
}
50% { /* 中间状态 */
background-color: yellow;
transform: translateX(100px);
}
100% { /* 结束状态 */
background-color: blue;
transform: translateX(0);
}
}
/* 使用动画 */
.box {
animation: myAnimation 3s ease-in-out infinite;
/* 单独设置 */
animation-name: myAnimation; /* 动画名称 */
animation-duration: 3s; /* 动画持续时间 */
animation-timing-function: ease-in-out; /* 动画函数 */
animation-delay: 0s; /* 延迟时间 */
animation-iteration-count: infinite; /* 动画次数：1, infinite */
animation-direction: alternate; /* 动画方向：normal, reverse, alternate, alternate-reverse */
animation-fill-mode: both; /* 动画填充模式：none, forwards, backwards, both */
animation-play-state: running; /* 动画状态：running, paused */
}
/* 暂停动画 */
.box:hover {
animation-play-state: paused;
}/* 淡入淡出 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 心跳效果 */
@keyframes heartbeat {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
/* 旋转效果 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 弹跳效果 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}/* 容器属性 */
.flex-container {
display: flex; /* 启用 Flexbox 布局 */
flex-direction: row; /* 主轴方向：row, row-reverse, column, column-reverse */
flex-wrap: nowrap; /* 换行方式：nowrap, wrap, wrap-reverse */
justify-content: flex-start; /* 主轴对齐：flex-start, flex-end, center, space-between, space-around, space-evenly */
align-items: stretch; /* 交叉轴对齐：stretch, flex-start, flex-end, center, baseline */
align-content: stretch; /* 多行对齐：stretch, flex-start, flex-end, center, space-between, space-around */
}
/* 项目属性 */
.flex-item {
flex: 0 1 auto; /* 简写：flex-grow flex-shrink flex-basis */
flex-grow: 0; /* 放大比例 */
flex-shrink: 1; /* 缩小比例 */
flex-basis: auto; /* 基准大小 */
order: 0; /* 排列顺序 */
align-self: auto; /* 自身对齐：auto, stretch, flex-start, flex-end, center, baseline */
}/* 容器属性 */
.grid-container {
display: grid; /* 启用 Grid 布局 */
grid-template-columns: 1fr 2fr 1fr; /* 列定义：可以使用长度、百分比、fr 单位 */
grid-template-rows: 100px 200px; /* 行定义 */
grid-template-areas: /* 区域定义 */
"header header header"
"sidebar content content";
gap: 10px; /* 网格间距：row-gap column-gap */
row-gap: 10px; /* 行间距 */
column-gap: 10px; /* 列间距 */
justify-items: stretch; /* 单元格内容水平对齐：stretch, start, end, center */
align-items: stretch; /* 单元格内容垂直对齐：stretch, start, end, center */
justify-content: stretch; /* 网格水平对齐：stretch, start, end, center, space-between, space-around, space-evenly */
align-content: stretch; /* 网格垂直对齐：stretch, start, end, center, space-between, space-around, space-evenly */
}
/* 项目属性 */
.grid-item {
grid-column: 1 / 3; /* 列跨度：起始列 / 结束列 */
grid-row: 1 / 2; /* 行跨度：起始行 / 结束行 */
grid-area: header; /* 区域名称 */
}Flexbox 布局：justify-content: space-between;
Flexbox 布局：flex-direction: column; justify-content: center; align-items: center;
Grid 布局：grid-template-columns: repeat(3, 1fr);
Grid 布局：网格区域划分
媒体查询允许根据设备特性（如屏幕宽度、高度、方向等）应用不同的样式，实现响应式设计。
/* 媒体查询语法 */
@media media-type and (media-feature) {
/* 样式规则 */
}
/* 示例：屏幕宽度小于 768px 时的样式 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
/* 多个媒体特性 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
width: 80%;
margin: 0 auto;
}
}
/* 不同媒体类型 */
@media print {
/* 打印样式 */
body {
font-size: 12pt;
color: black;
}
}
/* 设备方向 */
@media screen and (orientation: landscape) {
/* 横屏样式 */
}
@media screen and (orientation: portrait) {
/* 竖屏样式 */
}/* 移动设备 */
@media screen and (max-width: 480px) {
/* 样式 */
}
/* 平板设备 */
@media screen and (min-width: 481px) and (max-width: 768px) {
/* 样式 */
}
/* 笔记本/小型桌面 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 样式 */
}
/* 大型桌面 */
@media screen and (min-width: 1025px) {
/* 样式 */
}/* 定义变量 */
:root {
--primary-color: #3498db;
--secondary-color: #e74c3c;
--font-size: 16px;
--spacing: 10px;
}
/* 使用变量 */
.box {
background-color: var(--primary-color);
color: white;
font-size: var(--font-size);
padding: var(--spacing);
}
/* 修改变量 */
.box:hover {
--primary-color: #2980b9;
}/* 滤镜效果 */
.image {
filter: blur(5px); /* 模糊 */
filter: brightness(1.5); /* 亮度 */
filter: contrast(2); /* 对比度 */
filter: grayscale(100%); /* 灰度 */
filter: hue-rotate(90deg); /* 色相旋转 */
filter: invert(100%); /* 反色 */
filter: opacity(0.5); /* 透明度 */
filter: saturate(2); /* 饱和度 */
filter: sepia(100%); /* 棕褐色 */
/* 组合滤镜 */
filter: blur(2px) brightness(1.2) contrast(1.5);
}/* 混合模式 */
.box {
background-color: red;
mix-blend-mode: multiply; /* 混合模式：normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity */
}
/* 背景混合模式 */
.box {
background-image: url(image1.jpg), url(image2.jpg);
background-blend-mode: multiply; /* 背景混合模式 */
}/* 形状外边距 */
.shape {
clip-path: circle(50%); /* 圆形 */
clip-path: ellipse(50% 50% at 50% 50%); /* 椭圆 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 多边形（菱形） */
clip-path: inset(20px 10px 30px 10px); /* 内边距 */
}
/* 形状外边距 */
.text {
shape-outside: circle(50%); /* 文本围绕圆形 */
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
}这是一段文本，用于测试形状外边距效果。当元素设置了 clip-path 属性后，文本会围绕元素的形状排列，而不是围绕矩形边界。这种效果可以创建更加美观的布局。
CSS3 提供了许多强大的特性，使得网页设计更加灵活和美观。通过学习和掌握这些特性，可以创建出更加现代化的网页。
CSS3 引入了许多新特性，使网页设计更加灵活和美观。以下是 CSS3 的主要特性：
通过学习和掌握这些特性，可以创建更加现代化、美观和响应式的网页。