如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？
大白话如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？
嘿，朋友！今天咱们来聊聊 CSS 里超酷的 backdrop-filter 属性，它能让你轻松实现背景模糊等超炫特效。咱们先看看这属性到底是啥，然后说说咋用它，最后再讲讲兼容性的事儿。
啥是 backdrop-filter 属性
简单来说，backdrop-filter 属性就是用来给元素背后的背景添加视觉效果的，像模糊、高斯模糊、亮度调整这些效果都能实现。这么说吧，就好比你透过磨砂玻璃看东西，玻璃后面的景象就变得模糊起来，这个属性就有类似的效果。
咋用 backdrop-filter 属性实现背景模糊特效
咱先看个简单的例子，用它来实现背景模糊。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景模糊特效</title><style>/* 给 body 设置一个背景图片 */body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}/* 创建一个容器元素 */.container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景色 *//* 使用 backdrop-filter 属性实现背景模糊，这里设置模糊半径为 10px */backdrop-filter: blur(10px);border-radius: 10px;display: flex;justify-content: center;align-items: center;}/* 容器内的文本样式 */.text {font-size: 24px;color: #333;}</style>
</head><body><!-- 创建一个容器元素 --><div class="container"><!-- 容器内的文本 --><div class="text">背景模糊啦！</div></div>
</body></html>
在这个例子里，咱们给 body 设置了一张背景图片，然后创建了一个 div 容器。在这个容器的 CSS 样式里，用 backdrop-filter: blur(10px); 实现了背景模糊效果，模糊半径是 10px。
还能实现其他啥特效
除了模糊，backdrop-filter 还能实现好多其他特效呢。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其他背景特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: space-around;align-items: center;height: 100vh;margin: 0;}/* 模糊效果的容器 */.blur {width: 200px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 模糊效果，半径 10px */backdrop-filter: blur(10px);border-radius: 10px;display: flex;justify-content: center;align-items: center;}/* 亮度调整效果的容器 */.brightness {width: 200px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 亮度调整为 150% */backdrop-filter: brightness(150%);border-radius: 10px;display: flex;justify-content: center;align-items: center;}/* 对比度调整效果的容器 */.contrast {width: 200px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 对比度调整为 150% */backdrop-filter: contrast(150%);border-radius: 10px;display: flex;justify-content: center;align-items: center;}/* 容器内的文本样式 */.text {font-size: 18px;color: #333;}</style>
</head><body><!-- 模糊效果的容器 --><div class="blur"><div class="text">模糊效果</div></div><!-- 亮度调整效果的容器 --><div class="brightness"><div class="text">亮度调整</div></div><!-- 对比度调整效果的容器 --><div class="contrast"><div class="text">对比度调整</div></div>
</body></html>
在这个例子里，咱们创建了三个容器，分别用 backdrop-filter 实现了模糊、亮度调整和对比度调整三种特效。
兼容性问题
虽然 backdrop-filter 很厉害，但不是所有浏览器都支持它。像 Safari 浏览器就需要加 -webkit- 前缀，比如：
.backdrop {-webkit-backdrop-filter: blur(10px); /* Safari 浏览器需要加前缀 */backdrop-filter: blur(10px);
}
还有一些旧版本的浏览器可能完全不支持这个属性，所以在实际使用的时候，最好做一些兼容性处理，比如给不支持的浏览器提供一个替代方案。
好啦，现在你对 backdrop-filter 属性应该有更深入的了解了吧，赶紧动手试试，做出超炫的背景特效！
除了模糊，backdrop-filter属性还能实现哪些特效？
backdrop-filter 属性除了能实现模糊特效外，还能实现多种其他特效，以下为你详细介绍：
1. 亮度调整（brightness）
brightness() 函数可以调整元素背后背景的亮度。参数值小于 100% 会使背景变暗，大于 100% 则会使背景变亮。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>亮度调整特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.brightness-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 亮度调整为 150%，使背景变亮 */backdrop-filter: brightness(150%); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="brightness-container"><div class="text">亮度调整特效</div></div>
</body></html>
2. 对比度调整（contrast）
contrast() 函数用于调整元素背后背景的对比度。参数值小于 100% 会降低对比度，大于 100% 会增加对比度。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对比度调整特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.contrast-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 对比度调整为 150%，增加对比度 */backdrop-filter: contrast(150%); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="contrast-container"><div class="text">对比度调整特效</div></div>
</body></html>
3. 灰度化（grayscale）
grayscale() 函数可以将元素背后的背景转换为灰度图像。参数值为 0% 时背景保持原色，100% 时背景完全变为灰度图。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>灰度化特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.grayscale-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 背景完全灰度化 */backdrop-filter: grayscale(100%); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="grayscale-container"><div class="text">灰度化特效</div></div>
</body></html>
4. 色相旋转（hue-rotate）
hue-rotate() 函数能够改变元素背后背景的色相。参数是一个角度值，单位为度（deg），取值范围通常是 0deg 到 360deg。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>色相旋转特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.hue-rotate-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 色相旋转 90 度 */backdrop-filter: hue-rotate(90deg); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="hue-rotate-container"><div class="text">色相旋转特效</div></div>
</body></html>
5. 饱和度调整（saturate）
saturate() 函数用于调整元素背后背景的饱和度。参数值小于 100% 会降低饱和度，大于 100% 会增加饱和度。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>饱和度调整特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.saturate-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 饱和度调整为 200%，增加饱和度 */backdrop-filter: saturate(200%); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="saturate-container"><div class="text">饱和度调整特效</div></div>
</body></html>
6. 反相（invert）
invert() 函数可以将元素背后背景的颜色进行反相处理。参数值为 0% 时背景保持原色，100% 时背景颜色完全反转。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>反相特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.invert-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 背景颜色完全反相 */backdrop-filter: invert(100%); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="invert-container"><div class="text">反相特效</div></div>
</body></html>
7. 模糊（blur）
你之前提到的模糊效果是 backdrop-filter 最常用的特效之一。blur() 函数可以使元素背后的背景变得模糊，参数值表示模糊的半径，值越大，模糊效果越明显。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模糊特效</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.blur-container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);/* 模糊半径为 10px */backdrop-filter: blur(10px); border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}</style>
</head><body><div class="blur-container"><div class="text">模糊特效</div></div>
</body></html>
这些特效可以单独使用，也可以组合使用，从而创造出更加丰富多样的视觉效果。在组合使用时，只需要将多个函数用空格分隔开即可，例如：backdrop-filter: blur(10px) brightness(150%);。
如何针对不同浏览器进行backdrop-filter属性的兼容性处理？
backdrop-filter 是一个非常实用的 CSS 属性，不过它在不同浏览器中的支持情况有所不同。为了保证在各个浏览器中都能有较好的显示效果，需要进行兼容性处理。下面为你详细介绍处理方法。
1. 添加浏览器前缀
在 Safari 浏览器中，需要使用 -webkit- 前缀来支持 backdrop-filter 属性。所以，在编写代码时，要同时添加带前缀和不带前缀的属性，示例如下：
.element {-webkit-backdrop-filter: blur(10px); /* Safari 浏览器需要添加前缀 */backdrop-filter: blur(10px); /* 标准属性 */
}
在上述代码里，先使用 -webkit-backdrop-filter 以支持 Safari 浏览器，再使用标准的 backdrop-filter 属性，这样可以保证在支持标准属性的浏览器中也能正常显示。
2. 使用特性检测
可以借助 JavaScript 进行特性检测，以此判断浏览器是否支持 backdrop-filter 属性。如果不支持，就采用其他替代方案。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>backdrop-filter 兼容性处理</title><style>body {background-image: url('https://dummyimage.com/800x600/ff0000/ffffff');background-size: cover;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {width: 300px;height: 200px;background-color: rgba(255, 255, 255, 0.5);border-radius: 10px;display: flex;justify-content: center;align-items: center;}.text {font-size: 24px;color: #333;}/* 支持 backdrop-filter 的样式 */.backdrop-filter-supported {-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}/* 不支持 backdrop-filter 的替代样式 */.backdrop-filter-not-supported {background-color: rgba(255, 255, 255, 0.8);}</style>
</head><body><div class="container" id="my-container"><div class="text">这是一个容器</div></div><script>const container = document.getElementById('my-container');const testElement = document.createElement('div');if ('backdropFilter' in testElement.style || '-webkit-backdrop-filter' in testElement.style) {container.classList.add('backdrop-filter-supported');} else {container.classList.add('backdrop-filter-not-supported');}</script>
</body></html>
在这个示例中，先创建了一个测试元素 testElement，接着检查该元素的样式中是否存在 backdropFilter 或者 -webkit-backdrop-filter 属性。若存在，就给容器元素添加 backdrop-filter-supported 类，使用 backdrop-filter 实现模糊效果；若不存在，就添加 backdrop-filter-not-supported 类，采用不透明的背景色作为替代方案。
3. 提供替代方案
对于不支持 backdrop-filter 属性的浏览器，可以提供一些替代方案，比如使用半透明的背景色。示例如下：
.element {/* 支持 backdrop-filter 的样式 */-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);background-color: rgba(255, 255, 255, 0.5);/* 不支持 backdrop-filter 的替代样式 */background-color: rgba(255, 255, 255, 0.8);
}
在这个代码中，当浏览器支持 backdrop-filter 时，会应用模糊效果和半透明背景色；当不支持时，会使用不那么透明的背景色作为替代，确保页面的基本显示效果。
通过以上方法，你可以有效地处理 backdrop-filter 属性在不同浏览器中的兼容性问题，为用户提供一致的视觉体验。
相关文章：
如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？
大白话如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？ 嘿，朋友！今天咱们来聊聊 CSS 里超酷的 backdrop-filter 属性，它能让你轻松实现背景模糊等超炫特效。咱们先看看这属性到底是啥&…...
批量合并 PDF 文档，支持合并成单个文档，也支持按文件夹合并 PDF 文档
在日常工作中，合并多个 PDF 文档为一个文件是非常常见的需求。通过合并 PDF，不仅能够更方便地进行管理，还能在特定场景下（如批量打印）提高效率。那么，当我们需要批量合并多个 PDF 文件时，是否有…...
rbpf虚拟机-汇编和反汇编器
文章目录 一、概述二、主要功能三、关键函数解析3.1 汇编器3.1.1 parse -转换为Instruction列表3.1.2 assemble_internal-转换为Insn 3.2 反汇编器3.2.1 to_insn_vec-转换为机器指令 四、总结 Welcome to Code Blocks blog 本篇文章主要介绍了 [rbpf虚拟机-汇编和反汇编器] ❤…...
虚拟现实---＞unity学习
前言：这学期劳动课选了虚拟现实，其中老师算挺认真的，当然对一些不感兴趣的同学来说是一种折磨，我对这个unity的学习以及后续的虚幻引擎刚开始连基础的概念都没有，后面渐渐也是滋生了一些兴趣，用这篇博客记录…...
一文详解QT环境搭建：ubuntu20.4安装配置Qt5
随着软件开发技术的不断进步，跨平台应用程序的需求日益增长，开发者们面临着如何在不同操作系统之间保持代码的一致性和效率的问题。Qt作为一个成熟的跨平台C框架，在这方面提供了卓越的支持，不仅简化了GUI应用程序的创建过程&#…...
、断言-时间、Cookie信息)
Gateway实战(三)、断言-时间、Cookie信息
spring cloud-Gateway实战三、断言 断言一）、时间断言相关1、适用场景2、Demo案例二）、断言- Cookie信息1、用户身份验证与会话管理场景及Demo案例2、A/B测试及Demo案例断言 简单了解： 断言是一种在程序设计中用于检查程序状态或条件的机制，在gateway网关里，断言的作用是…...
PyTorch中的Tensor
PyTorch中的Tensor 是核心数据结构，类似于 NumPy 的多维数组，但具备 GPU 加速和自动求导等深度学习特性。 一、基本概念 核心数据结构 Tensor 是存储和操作数据的基础单元，支持标量（0D）、向量（1D&am…...
C++11大数加减
C11大数加减 // 20190412.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 //#include "pch.h" #include <iostream> #include <algorithm> // sort find find_if #include <string> #include <vector> using names…...
OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码，QOpenGL渲染yuv420p或nv12视频（附源码）
🔔 OpenGL 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…） 运行效果...
【IDEA的个性化配置】
目录： 一：隐藏项目路径二：禁用斜体注释三：重新Maven构建未完待续... 一：隐藏项目路径 😊在IDEA左侧的Project目录中，项目名称后面显示了项目的文件路径地址，如果不喜欢可以隐藏&…...
Vue 类与样式
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易…...
【Kafka】分布式消息队列的核心奥秘
文章目录 一、Kafka 的基石概念主题（Topic）分区（Partition）生产者（Producer）消费者（Consumer） 二、Kafka 的架构探秘Broker 集群副本机制 三、Kafka 的卓越特性高…...
自动化发布工具CI/CD实践Jenkins部署与配置教程
1. 前言背景 其实一直想把jenkins 的笔记整理下，介于公司这次升级jenkins2.0 ，根据自己部署的一些经验，我把它整理成笔记。 之前我们的jenkins1.0 时代 还一直停留在 free style 或者 maven 风格的项目，随着项目的日益增多&#x…...
python中的demjson包介绍
demjson是Python中的一个第三方模块库，专门用于编码和解码JSON数据。以下是关于demjson包的详细介绍： 一、主要功能 编码与解码： demjson提供了将Python对象（如字典、列表等）编码成JSON字符串的功能。同时，…...
什么是SQL作业
SQL作业是在数据库服务器上按特定时间或间隔自动执行的计划任务或流程，这些作业由Microsoft SQL Server中的SQL Server代理管理，对于自动执行日常任务（如数据库系统中的备份、数据导入和报告生成）以及确保及时准确地处理和更新数据…...
Android实践开发制作小猴子摘桃小游戏
Android实践制作小猴子摘桃小游戏 实践素材项目源文件获取：Android可能存在版本差异项目如果不能正确运行，可以使用里面的素材自己构建项目Android实践制作小猴子摘桃小游戏Android实践制作小猴子摘桃小游戏https://mp.weixin.qq.com/s/jNU_hVfj9xklsil…...
springboot整合couchbase(集群)
springboot整合couchbase 1、Couchbase1.1、介绍1.2、Bucket1.3、Couchbase SDK 2、(key,value)写入couchbase集群2.1、总体图2.2、依赖2.3、CouchbaseConfig 配置文件2.4、代码使用 1、Couchbase 1.1、介绍 1.2、Bucket 在 Couchbase 中，bucket 是一个重要的概念…...
VsCode启用右括号自动跳过(自动重写) - 自录制gif演示
VsCode启用右括号自动跳过(自动重写) - 自录制gif演示 前言 不知道大家在编程时候的按键习惯是怎样的。输入完左括号后编辑器一般会自动补全右括号，输入完左括号的内容后，是按→跳过右括号还是按)跳过右括号呢？ for (int i 0; i < a.s…...
[Linux]在vim中批量注释与批量取消注释
1.在vim中批量注释的步骤： 1.在normal模式下按Ctrl v ，进入V-BLOCK模式 2.按 J 键 或 K 键选择要注释的内容，J向上K向下 我们给第5，6，7行进行注释 3.按住shift i进入插入模式，输入 // 4.点击ESC键&…...
NC,GFS、ICON 数据气象信息可视化--降雨量的实现
随着气象数据的快速发展和应用，气象信息的可视化成为了一项不可或缺的技术手段。它不仅能帮助气象专家快速解读数据，还能为公众提供直观的天气预报信息。今天，我们将从降雨量的可视化出发，带大家一起了解如何实现气象数据的可视化…...
LLM之RAG实战（五十二）| 如何使用混合搜索优化RAG 检索
在RAG项目中，大模型生成的参考内容（专业术语称为块）来自前一步的检索，检索的内容在很大程度上直接决定了生成的效果，因此检索对于RAG项目至关重要，最常用的检索方法是关键字搜索和语义搜索。本文将分别介绍…...
探索Scala基础：融合函数式与面向对象编程的强大语言
Scala作为一门在现代编程领域备受瞩目的编程语言，融合了函数式编程和面向对象编程的特性，运行于Java虚拟机（JVM）之上，与Java有着良好的互操作性。它简洁、高效且表达力强，适用于各种规模和类型的软件开发项…...
Selenium文件上传
在 Web 自动化测试中，文件上传是一项常见的任务。不同的网站和前端技术可能导致上传方式有所不同，因此需要采用不同的方法进行处理。 方法 1：使用 send_keys() 直接上传（最常用） 适用场景： 页面中 有标准的 <input type="file"> 标签。 不需要弹出 Wind…...
Java多线程与高并发专题——Condition 和 wait/notify的关系
引入 上一篇关于Condition，我们对Condition有了进一步了解，在之前生产/消费者模式一文，我们讲过如何用 Condition 和 wait/notify 来实现生产者/消费者模式，其中的精髓就在于用Condition 和 wait/notify 来实现简易版阻塞队列&am…...
mysql-分区和性能
mysql自身只支持表的横向分区。 常听到开发人员说“”对表做个分区“，然后数据的查询就会快了。这是真的吗？实际上可能跟根本感觉不到查询速度的提升，甚至会发现查询速度急剧下降。因此，在合理使用分区之前，必须了解分…...
使用matlab进行分位数回归
对于使用MATLAB、R语言或者STATA执行带有虚拟变量的分位数回归，这三个工具都带有强大的分析功能。在核心观点上，首先需要理解分位数回归的基本原理、其次要掌握如何在各个统计软件中实现该分析、最后，需要熟悉虚拟变量在模型中的应用并合理加…...
[操作系统，学习记录]3.进程（2）
1.fork(); 玩法一：通过返回值if，else去执行不同的代码片段 玩法二：if，else然后调用execve函数去执行新的程序 2.进程终止： 退出码，子进程通过exit/return返回，父进程wait/waitpid等待而得&am…...
26考研——排序_选择排序_选择排序的基本思想 简单选择排序（8）
408答疑 文章目录 四、选择排序选择排序的基本思想简单选择排序定义算法思想性能分析空间效率时间效率稳定性 适用性 九、参考资料鲍鱼科技课件26王道考研书 四、选择排序 选择排序的基本思想 每一趟（如第 i i i 趟）在剩下 n − i 1 n-i1 n−i1&…...
StarRocks BE宕机排查
StarRocks BE宕机排查 排查是否OOM dmesg -T|grep -i oom #排查是否oom原因： 2.X版本OOM原因 BE 的配置文件 (be.conf) 中 mem_limit 配置不合理，需要配置mem_limit(机器总内存-其他服务占用内存-1~2g(系统预留)) 比如机器内存40G，上面有…...
PPT——组合SCI论文图片
SCI论文中对于图的排版常常是最头疼的事情，通常需要几个图组合在一起，并且如何控制图中的字体一致也是麻烦事。 保持这个大图里面的一致，转头一看跟其他图又不一致了。最近跟我的博导学了一手，今天就来记录一下吧。主要用到的软件…...