CSS3 简介

什么是 CSS3？

CSS3 是层叠样式表的第三代，用于控制 HTML 元素的外观和布局。它带来了圆角、阴影、渐变、动画、网格/弹性布局等强大特性。

CSS 由选择器和声明块组成：

h1 {
color: #d97706;
font-size: 2rem;
}

h1 是选择器，color: #d97706 是声明（属性和值）。

标签选择器 — 选中所有同类标签

p { color: #333; }

类选择器 — 选中带有特定 class 的元素（以 . 开头）

.demo-box { background: #f1f5f9; }

ID 选择器 — 选中唯一 ID 的元素（以 # 开头）

#header { border-bottom: 2px solid #d97706; }

组合选择器 — 同时选中多个元素

h1, h2, h3 { font-weight: 600; }

后代选择器 — 选中某个元素内部的子元素

article p { line-height: 1.8; }

下方展示了 CSS3 的核心特性：

✨ CSS3 渐变按钮

使用 linear-gradient 和 border-radius

Flex 1 Flex 2 Flex 3 Flex 4

使用 display: flex 实现弹性布局

123 456

使用 display: grid 实现二维布局

页面布局使用了 CSS Grid（两栏）和 Flexbox（导航）。CSS3 演示部分展示了渐变、圆角、弹性布局和网格布局的实际应用。