css3教程

封面图 • 2026-04-09 • Html/Css

CSS3 是 CSS（层叠样式表）的最新版本，它为网页设计提供了更强大的功能，如动画、渐变、阴影、圆角等。下面是一个简要的 **CSS3 教程**，帮助你快速入门。

---

## 📘 一、CSS3 简介

CSS3 是 CSS 的升级版，它将原本的 CSS 标准拆分为多个模块，例如：

- **选择器模块**
- **盒模型模块**
- **背景和边框模块**
- **文本效果模块**
- **2D/3D 转换模块**
- **动画模块**
- **媒体查询模块（响应式设计）**

---

## 🧩 二、基本语法

```css
selector {
    property: value;
}
```

例如：

```css
h1 {
    color: red;
    font-size: 24px;
}
```

---

## 🔧 三、常用 CSS3 属性

### 1. 圆角（Border Radius）

```css
.box {
    border-radius: 10px; /* 所有角 */
    border-radius: 10px 5px; /* 左上右下 / 右上左下 */
}
```

### 2. 阴影（Box Shadow）

```css
.box {
    box-shadow: 5px 5px 10px #888; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
```

### 3. 渐变（Gradient）

#### 线性渐变（Linear Gradient）

```css
background: linear-gradient(to right, red, blue);
```

#### 径向渐变（Radial Gradient）

```css
background: radial-gradient(circle, red, yellow);
```

### 4. 文本阴影（Text Shadow）

```css
.text {
    text-shadow: 2px 2px 4px #000;
}
```

### 5. 过渡（Transition）

```css
.box {
    transition: all 0.5s ease;
}

.box:hover {
    transform: scale(1.2);
}
```

### 6. 动画（Animation）

```css
@keyframes myMove {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

.box {
    animation: myMove 2s infinite;
}
```

### 7. 2D/3D 转换（Transform）

```css
.transform-box {
    transform: rotate(30deg) scale(1.5);
}
```

### 8. 响应式设计（Media Queries）

```css
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
```

---

## 🎨 四、CSS3 新特性汇总

| 特性 | 描述 |
|------|------|
| `border-radius` | 圆角 |
| `box-shadow` | 盒子阴影 |
| `text-shadow` | 文字阴影 |
| `linear-gradient` / `radial-gradient` | 渐变背景 |
| `transform` | 2D/3D 转换 |
| `transition` | 过渡动画 |
| `animation` | 自定义动画 |
| `flexbox` | 弹性布局 |
| `grid` | 网格布局（CSS Grid） |
| `media queries` | 响应式设计 |

---

## 📚 五、推荐学习资源

1. [MDN Web Docs - CSS3](https://developer.mozilla.org/zh-CN/docs/Web/CSS)
2. [W3Schools - CSS3 教程](https://www.w3schools.com/css/css3_intro.asp)
3. [CSS3 交互式教程（CodePen）](https://codepen.io/)
4. [B站 CSS3 视频教程](https://www.bilibili.com/)

---

## ✅ 六、练习建议

1. 创建一个带有圆角、阴影、渐变背景的按钮。
2. 实现一个鼠标悬停时出现的过渡效果。
3. 使用 Flexbox 或 Grid 布局创建一个响应式页面。

---

如果你想要更详细的某一部分（比如 Flexbox、Grid、动画等），可以告诉我，我可以为你提供更深入的讲解和示例！

是否需要我帮你写一个完整的 CSS3 示例？