CSS3 知识与使用指南

一、CSS3 简介

CSS3 是 Cascading Style Sheets（层叠样式表）的第三个版本，作为前端开发的核心技术之一，它在 CSS2 的基础上新增了大量实用特性，不仅简化了样式编写流程，还极大地提升了页面的视觉效果和交互体验。相比传统 CSS，CSS3 具有**模块化 **（按功能拆分模块，如选择器、边框、动画等）、兼容性逐步完善（主流浏览器已全面支持核心特性）、减少对 JS 依赖 （如动画、过渡效果可直接通过 CSS 实现）等优势，目前已成为构建现代网页界面的必备技术。

二、CSS3 核心特性及使用

2.1 选择器增强

CSS3 扩展了选择器种类，无需依赖 HTML 结构或类名，即可更精准地选中元素，减少冗余代码。

选择器类型	语法示例	作用说明	应用场景
属性选择器	input[type="text"]	选中 type 属性值为 text 的 input 元素	表单元素样式定制
结构伪类选择器	ul li:nth-child(2n)	选中 ul 下索引为偶数的 li 元素（从 1 开始）	列表隔行变色（表格也适用）
否定伪类选择器	div:not(.box)	选中所有不包含 box 类的 div 元素	排除特定元素的通用样式
目标伪类选择器	#content:target	选中当前 URL 锚点指向的 #content 元素	锚点跳转后高亮目标内容

代码示例（列表隔行变色）：

/* 选中 ul 下奇数索引的 li，设置背景色 */

ul li:nth-child(odd) {

    background-color: #f5f5f5;

}

2.2 边框与圆角优化

CSS3 新增了圆角、边框图片、阴影等特性，替代了传统的 “切图 + 嵌套标签” 实现方式，大幅提升开发效率。

2.2.1 圆角（border-radius）

用于实现元素的圆角效果，支持单独设置四个角的半径，也可统一设置。

语法：

div {
    /* 统一设置四个角的圆角半径（数值/百分比） */

    border-radius: 10px;

    /* 分别设置：上左、上右、下右、下左（顺时针） */

    border-radius: 5px 10px 15px 20px;

    /* 圆形效果（宽高需一致） */

    border-radius: 50%;


}

应用场景：按钮、头像、卡片等需要圆角的组件。

2.2.2 边框阴影（box-shadow）

为元素添加阴影效果，支持设置阴影的颜色、模糊度、偏移量、扩散范围等。

语法：

div {
    /* 水平偏移 垂直偏移 模糊度 扩散范围 颜色 （inset 可选，表内阴影）*/

    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);

    &#x20
;

    /* 内阴影示例 */

    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

应用场景：卡片悬浮效果、按钮高亮、模拟立体界面。

2.3 背景样式增强

CSS3 对背景的控制更灵活，支持多背景图片、背景尺寸调整、背景裁剪等功能。

2.3.1 多背景图片（background-image）

允许为一个元素设置多张背景图片，按顺序叠加显示（先写的图片在顶层）。

代码示例：

div {

    width: 500px;

    height: 300px;

    /* 第一张背景图（顶层）：logo；第二张背景图（底层）：纹理 */

    background-image: url("logo.png"), url("texture.jpg");

    background-position: right bottom, center; /* 分别设置每张图的位置 */

    background-repeat: no-repeat, repeat; /* 分别设置是否重复 */

}

2.3.2 背景尺寸（background-size）

控制背景图片的尺寸，替代传统的 “通过图片编辑调整尺寸” 的方式。

常用值：

• cover：图片等比例缩放，完全覆盖元素（可能部分图片被裁剪）；

• contain：图片等比例缩放，完整显示在元素内（可能留有空白）；

• 具体数值（如 100px 80px）：固定宽高（可能拉伸图片）。

代码示例：

div {
    /* 背景图完全覆盖元素，保持比例 */

    background-size: cover;
}

2.4 文本样式升级

CSS3 新增了文本阴影、文本溢出处理、文本换行等特性，优化文本的视觉呈现和排版。

2.4.1 文本阴影（text-shadow）

为文本添加阴影，语法与 box-shadow 类似，但无 “扩散范围” 和 “inset” 参数。

代码示例：

div {
    /* 水平偏移 垂直偏移 模糊度 颜色 */

    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

    /* 彩色阴影（如标题高亮） */

    text-shadow: 0 0 8px #ff0000, 0 0 12px #00ff00;
}

2.4.2 文本溢出处理（text-overflow）

当文本超出容器宽度时，控制显示效果（需配合 white-space: nowrap 和 overflow: hidden 使用）。

代码示例（单行文本省略）：

.ellipsis {
    width: 200px;
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    display: inline-block;
}

应用场景：列表标题、卡片描述等需要限制文本长度的场景。

2.5 动画与过渡

CSS3 的动画（animation）和过渡（transition）特性，可实现元素样式的动态变化，无需依赖 JavaScript。

2.5.1 过渡（transition）

用于 “元素状态变化时的平滑过渡”（如 hover 时的样式切换），需指定过渡的属性、时长和时间曲线。

语法：

/* 过渡属性 过渡时长 时间曲线（可选） 延迟时间（可选） */

div {
    transition: all 0.3s ease;
}

代码示例（按钮 hover 效果）：

.button {

    width: 120px;

    height: 40px;

    background-color: #4285f4;

    color: white;

    border: none;

    /* 所有样式变化都平滑过渡，时长 0.3s */

    transition: all 0.3s ease;

}

.button:hover {

    background-color: #3367d6;

    transform: scale(1.05);
    /* 轻微放大 */

}

2.5.2 动画（animation）

用于 “更复杂的动态效果”（如循环旋转、逐帧动画），需先定义 @keyframes 动画规则，再绑定到元素上。

代码示例（元素旋转动画）：

/* 1. 定义动画规则：从 0° 旋转到 360° */

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* 2. 绑定动画到元素 */

.loading {

    width: 50px;

    height: 50px;

    border: 5px solid #f3f3f3;

    border-top: 5px solid #4285f4;

    border-radius: 50%;

    /* 动画名称 时长 线性 无限循环 */

    animation: rotate 1s linear infinite;

}

应用场景：加载动画、Banner 轮播、页面交互反馈。

2.6 弹性盒模型（Flexbox）

Flexbox 是 CSS3 新增的布局模型，用于快速实现元素的 “水平 / 垂直居中”“自适应排列”“空间分配” 等布局需求，解决了传统浮动布局的兼容性和复杂度问题。

核心概念：

• 容器（flex container）：设置 display: flex 的父元素；

• 项目（flex item）：容器内的子元素；

• 主轴（main axis）：项目排列的主要方向（默认水平，可通过 flex-direction 修改）；

• 交叉轴（cross axis）：与主轴垂直的方向。

常用属性（容器）：

属性	作用说明	常用值
display: flex	将元素设为 Flex 容器	-
justify-content	控制项目在主轴上的对齐方式	center（居中）、space-between（两端对齐）
align-items	控制项目在交叉轴上的对齐方式	center（垂直居中）、flex-start（顶部对齐）
flex-direction	控制主轴方向	row（水平，默认）、column（垂直）
flex-wrap	控制项目是否换行	wrap（换行）、nowrap（不换行，默认）

代码示例（水平垂直居中）：

/* 父容器：设置为 Flex 容器，主轴和交叉轴都居中 */

.parent {

    width: 400px;

    height: 300px;

    border: 1px solid #ccc;

    display: flex;

    justify-content: center; /* 主轴（水平）居中 */

    align-items: center; /* 交叉轴（垂直）居中 */

}

/* 子项目：无需额外设置，自动居中 */

.child {

    width: 100px;

    height: 100px;

    background-color: #4285f4;

}

三、CSS3 兼容性处理

虽然主流浏览器（Chrome、Firefox、Safari、Edge）已全面支持 CSS3 核心特性，但部分旧浏览器（如 IE9 及以下）仍存在兼容性问题。常用解决方案如下：

1. 添加浏览器前缀：

   部分特性在早期浏览器中需添加前缀（如 -webkit- 用于 Chrome/Safari，-moz- 用于 Firefox），示例：

.box {

    -webkit-border-radius: 10px; /* Chrome/Safari 早期版本 */

    -moz-border-radius: 10px; /* Firefox 早期版本 */

    border-radius: 10px; /* 标准语法（放最后） */

}

实际开发中，可通过 PostCSS 等工具自动添加前缀，无需手动编写。

1. 渐进式增强：

   优先实现基础功能，再为支持 CSS3 的浏览器添加高级效果（如 “无圆角时显示直角，有圆角时显示圆角”），确保旧浏览器也能正常使用。

2. 使用兼容性查询工具：

   通过 Can (opens new window) I Use (opens new window) 查询 CSS3 特性在各浏览器中的支持情况，针对性处理兼容性问题。

四、CSS3 实际应用场景总结

应用场景	核心 CSS3 特性
按钮 / 卡片 / 头像样式	border-radius、box-shadow、transition
表单元素定制	属性选择器、text-overflow
页面布局（居中、自适应）	Flexbox、background-size
动态效果（加载、hover）	animation、transition、transform
文本美化（标题、描述）	text-shadow、text-overflow
背景与图片展示	多背景图片、background-cover

五、CSS3 进阶

1. 核心作用 无需 JavaScript，即可为元素创建复杂、多关键帧的动态效果。
2. 基本语法

demo {
/* 1. 定义动画序列 */

@keyframes 动画名称 {
0% { 初始样式; } /* 或用from表示 */
50% { 中间样式; }
100% { 结束样式; } /* 或用to表示 */
}

/* 2. 给元素应用动画 */
目标元素 {
animation: 动画名称 时长 时间函数 延迟时间 循环次数 播放方向;
/* 示例 */
animation: fadeIn 1.5s ease-in-out 0.3s infinite alternate;
}
}

上面学完了都是基础，后面我会跟新css进阶和高级的一些用法，比如

• css3动画
• css3过渡
• css3布局
• css3滤镜
• css3媒体查询
• css3flex布局
• css3grid布局以及rem和vm