CSS3 用法详细讲解：从基础到进阶

原创

已于 2025-05-13 22:37:10 修改

· 1.2k 阅读

7 ·

版权

文章标签：

#css3 #前端 #css

于 2025-02-17 10:45:51 首次发布

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 提供了 @keyframes 和 <

最低0.47元/天解锁文章