OpenCV动态下雪特效:C++实现与Visual Studio环境配置
1. 项目概述与核心价值最近在做一个需要营造氛围感的C小项目琢磨着加点视觉效果。静态背景太单调想搞点动态元素比如下雪。网上找了一圈要么是纯图形库的要么是游戏引擎里的对于只想在OpenCV里快速实现一个轻量级特效的需求来说都不太直接。于是我就用OpenCV配合Visual Studio从零搓了一个动态下雪特效。这玩意儿别看原理简单但效果挺唬人用在一些演示程序、屏保或者需要动态背景的界面里瞬间就能把氛围感拉满。这个特效的核心就是用OpenCV在图像或视频流上模拟大量雪花随机飘落、堆积甚至融化的过程。它不依赖复杂的物理引擎纯粹通过算法控制每一片“雪花”的位置、速度和状态再实时绘制到画面上。对于刚接触OpenCV图像处理或者想给C程序加点趣味性的朋友来说这是个非常好的练手项目。你能学到如何管理大量动态对象、如何进行高效的图像绘制与混合以及如何用简单的规则模拟看似复杂的自然现象。整个过程在Visual Studio里配置好OpenCV环境后写起来非常顺畅代码量也不大但成就感十足。2. 环境准备与项目配置2.1 开发工具选型与安装工欲善其事必先利其器。我们这个项目主要依赖两样东西OpenCV库和Visual Studio集成开发环境。首先说OpenCV我选择的是OpenCV 4.x的稳定版本比如4.5.5或4.8.0。为什么不选最新的因为对于基础图像处理和学习来说稳定压倒一切新版本可能引入一些尚未普及的API变动增加不必要的学习成本。直接从OpenCV官网下载对应平台的预编译包Windows pack是最省事的方法。下载后你会得到一个包含include、lib和bin目录的压缩包解压到一个没有中文和空格的路径下比如D:\opencv。然后是Visual Studio我强烈推荐使用VS 2019或VS 2022的社区版它们对C的支持非常完善且免费。安装时记得勾选“使用C的桌面开发”这个工作负载这会自动安装必要的编译器和基础库。有些人喜欢用VS Code配合CMake但对于Windows平台下的C OpenCV新手Visual Studio的集成度更高配置更直观出了问题也更容易排查。2.2 Visual Studio项目属性配置环境装好接下来就是在VS里创建一个新的空C项目然后进行关键的属性配置。这一步是很多新手卡住的地方其实就三步包含目录、库目录、附加依赖项。包含目录告诉编译器去哪里找OpenCV的头文件。在项目属性页 - C/C - 常规 - 附加包含目录里添加你的OpenCV解压路径下的include目录以及其子目录opencv2。例如D:\opencv\build\include。库目录告诉链接器去哪里找OpenCV的库文件.lib。在链接器 - 常规 - 附加库目录里添加OpenCV的lib目录。这里需要注意lib目录下通常有根据编译器版本如vc14, vc15对应VS2015/2017vc16对应VS2019/2022和构建类型Debug/Release区分的子文件夹。例如对于VS2022的Debug模式路径可能是D:\opencv\build\x64\vc16\lib。附加依赖项明确告诉链接器需要链接哪些具体的库文件。在链接器 - 输入 - 附加依赖项里添加。OpenCV的库名通常以opencv_world开头。对于Debug模式添加opencv_world4xxd.libxx是版本号如opencv_world455d.lib对于Release模式添加opencv_world4xx.lib。使用world库的好处是它把大多数模块打包在一起省去了一个个添加的麻烦。注意配置时务必注意平台x64还是x86和配置Debug还是Release的匹配。在属性管理器里为Debug | x64和Release | x64分别配置一套属性是最规范的做法。配置完成后可以写一段简单的代码如cv::Mat img cv::imread(“test.jpg”);测试一下确保能编译通过。2.3 雪花数据结构设计在写代码之前我们先要想好一片“雪花”在程序里应该是什么样子。这本质上是一个面向对象的设计问题。我定义了一个SnowFlake结构体或类它至少需要包含以下属性位置 (x, y)雪花当前在窗口中的像素坐标。速度 (vx, vy)雪花在水平和垂直方向上的移动速度。垂直速度vy是主要的下落速度vx可以模拟微风带来的水平飘动。半径 (radius)或大小决定雪花绘制时的大小。透明度 (alpha)用于实现雪花堆积时半透明叠加的效果或者模拟雪花逐渐“融化”消失。生命周期/状态可以是一个布尔值是否活跃或者一个计数器用于控制雪花何时消失并重生。为什么用结构体而不是简单的数组因为面向对象的方式更清晰后续如果要给雪花增加更多属性比如颜色、形状、旋转角度扩展起来非常方便。我们可以用一个std::vectorSnowFlake来管理成千上万个雪花实例。3. 核心算法与特效实现3.1 雪花初始化与属性随机化特效要自然关键在于“随机”和“多样”。我们不能让所有雪花都一样。在初始化雪花数组时我会为每一片新生成的雪花赋予随机的属性初始x坐标随机分布在窗口宽度范围内。初始y坐标通常从屏幕顶部之外负值开始这样雪花是逐渐进入视野的。垂直速度 (vy)在一个基础值附近随机浮动比如1.0 ~ 3.0像素/帧。速度快的雪花感觉离得近速度慢的感觉远这样就形成了简单的景深错觉。水平速度 (vx)可以设置为一个很小的随机值比如-0.5 ~ 0.5模拟微风。也可以让vx和vy有一定关联形成斜向飘落。半径随机范围例如1 ~ 5像素。大雪花和小雪花混合画面更丰富。透明度初始可以设为完全透明0或半透明如128在飘落过程中再变化。这里有个技巧不要一次性把所有雪花都初始化在屏幕内。可以分批初始化或者让雪花在生命周期结束后从屏幕顶部随机位置“重生”这样就能形成源源不断的下雪效果。3.2 雪花运动与物理模拟运动更新的逻辑在每一帧中执行。遍历所有的雪花更新它们的位置x x vx;y y vy;这就是最基本的匀速运动。但这样太假了像纸片。我们可以加入一些简单的物理模拟来提升真实感加速度让垂直速度vy每帧增加一个很小的值如0.05模拟重力加速。但要注意上限否则雪花会越落越快。风力可以定义一个全局的、或随时间缓慢变化的风力系数叠加到vx上。甚至可以让风力在水平方向周期性变化模拟阵风。空气阻力简化实际上雪花最终会达到一个终端速度。我们可以用一个非常简化的方式模拟当vy大于某个最大值时就不再增加。更新完位置后要判断雪花是否超出了屏幕边界。对于从顶部飘出的雪花y 窗口高度我们可以将其重置到顶部随机位置并重新随机化其速度、大小等属性实现循环利用。3.3 基于OpenCV的雪花绘制与混合这是将数据变为视觉效果的关键一步。OpenCV的绘图函数主要针对矢量图形在循环中绘制成千上万个圆点性能堪忧。更高效的做法是利用OpenCV的矩阵操作。我的策略是准备一个和背景图或纯色画布同样大小的、全透明的Mat4通道带Alpha通道作为雪花的绘制层。然后遍历所有雪花在这个绘制层上用cv::circle函数以雪花的位置为圆心半径为大小用白色或淡蓝色且带有一定透明度通过Scalar(B, G, R, alpha)设置进行填充绘制。这里有一个非常重要的细节混合Blending。我们不能直接把绘制层覆盖到背景上那样会完全遮住背景。我们需要的是雪花半透明地叠加在背景上。这需要使用Alpha混合公式。幸运的是OpenCV的cv::addWeighted函数可以帮我们轻松实现。假设背景图像是background雪花绘制层是snow_layer混合后的图像是result那么cv::addWeighted(background, 1.0, snow_layer, alpha_scale, 0, result);这里的alpha_scale是一个全局系数可以控制整体雪花的浓淡。而snow_layer中每个像素的Alpha值我们在画圆时设置的则决定了该处雪花的个体透明度。这种逐像素的Alpha混合能让雪花之间、雪花与背景之间融合得非常自然。实操心得直接在一帧上绘制数万个圆点即使用了cv::circle在循环里调用效率也不高。一个优化技巧是可以利用OpenCV的cv::Mat的ROI感兴趣区域和掩码mask。先创建一个全黑的掩码图在雪花对应的像素位置画白点然后利用这个掩码一次性将雪花颜色“贴”到绘制层上。这种方法在雪花数量极大时比如超过1万片性能提升明显。3.4 动态特效进阶堆积与融化基础的下雪有了我们再来点更高级的——让雪花在“地面”或物体表面堆积起来甚至慢慢融化。这需要引入一个积雪高度图的概念。我们可以定义一个和图像宽度一样的数组accumulation用来记录每一列像素位置的积雪高度单位可以是像素。在每一帧更新时除了让雪花飘落还要判断雪花是否碰到了“地面”即y坐标大于某个阈值比如窗口高度-50。如果碰到了这片雪花就停止运动并将其“质量”可以简单理解为1加到对应x坐标的accumulation数组中。然后在绘制的时候我们不仅要画空中飘的雪花还要根据accumulation数组来绘制堆积的雪。可以在背景图像的底部用白色绘制一些矩形或更自然的曲线比如用cv::line画有起伏的线段来代表积雪。为了让积雪看起来更自然可以每隔几帧对accumulation数组做一个简单的高斯模糊或平滑处理模拟雪的沉降和扩散。“融化”效果可以通过逐渐减少accumulation数组中的值来实现。例如每一帧都让所有积雪高度减少一个很小的衰减值直到为0。同时可以配合改变堆积雪绘制的透明度让它慢慢变淡消失。4. 性能优化与代码架构4.1 对象池与内存管理当雪花数量达到数千甚至上万时频繁地创建和销毁SnowFlake对象会给内存管理带来压力也可能引发内存碎片。一个经典的优化手段是使用对象池Object Pool。我们预先分配一个固定大小的SnowFlake数组比如10000个而不是使用std::vector的动态增长。数组中每个雪花都有一个“活跃active”状态标志。初始化时所有雪花都不活跃。当需要一片新雪花时我们遍历对象池找到一个不活跃的雪花初始化其属性并激活它。当雪花飘出屏幕或生命周期结束时我们不是删除它而是将其状态设为不活跃放回池中等待复用。这样做的好处是内存分配一次完成避免了运行时反复new/delete或vector扩容的开销对需要稳定帧率的动画程序尤其重要。管理对象池时可以用两个索引或链表来分别跟踪活跃和不活跃的对象集合以提高查找效率。4.2 多线程更新与渲染分离对于更极致的性能要求可以考虑将逻辑更新和渲染绘制分离到不同的线程中。这是一个稍微高级一点的架构。我们可以设计一个生产者-消费者模型。一个“更新线程”生产者专门负责遍历所有雪花计算它们的新位置、处理碰撞和生命周期逻辑。计算完成后将更新后的雪花数据位置、状态等放入一个线程安全的缓冲区。另一个“渲染线程”消费者则从缓冲区中取出数据在OpenCV的绘制层上进行实际的绘图操作然后与背景混合最后通过cv::imshow显示。这样做的好处是即使某一帧的逻辑计算非常耗时比如加入了复杂的碰撞检测也不会直接卡住画面显示渲染线程可以沿用上一帧的数据继续显示保证了动画的流畅性。不过引入多线程会大大增加程序的复杂度需要处理好线程同步和数据一致性问题对于初学者来说建议先优化单线程版本确有需要再考虑此方案。4.3 绘制算法优化技巧即使是在单线程中绘制操作本身也有很大的优化空间。批量绘制如前所述避免在循环内逐个调用cv::circle。可以改用cv::Mat的像素直接操作。例如先创建一个全零的绘制层然后遍历雪花通过指针直接计算并设置绘制层上对应像素点的RGBA值。虽然代码稍复杂但性能提升是数量级的。减少重绘区域如果背景是静态的我们不需要每一帧都重新混合整个画面。可以只更新雪花位置发生变化的那一小块区域。这需要记录雪花上一帧的位置并在当前帧将其从绘制层中“擦除”或恢复背景然后在新的位置绘制。这被称为“脏矩形”更新在复杂背景或大量动态元素时非常有效。使用查找表LUT如果雪花的样式是固定的几种比如不同大小、不同模糊程度的雪斑可以预先将这几种样式绘制到小的Mat上作为精灵Sprite。实际绘制时根据雪花类型直接将对应的精灵copyTo到绘制层的相应位置。这比实时计算圆形填充要快得多。5. 集成应用与效果调试5.1 与视频流或摄像头结合让下雪特效叠加在实时摄像头画面上会非常有趣。实现起来也很简单。主循环从cv::VideoCapture对象中读取每一帧作为背景然后在这个背景帧上用前面所述的方法叠加雪花绘制层即可。这里需要注意摄像头的帧率例如30fps和我们雪花动画的帧率匹配问题。最好使用一个固定的时间间隔如每33毫秒来更新和显示一帧而不是依赖循环的速度。可以使用cv::waitKey的延时功能或者更精确地使用C11的chrono库来计算帧时间差deltaTime用这个时间差来更新雪花的位置position velocity * deltaTime这样就能保证雪花的下落速度与真实时间同步不受机器性能波动的影响。5.2 参数调节与视觉效果微调一个好看的特效离不开反复调试。我们可以将一些关键参数设计成可调节的方便实时预览效果。例如雪花数量直接控制vector的大小或对象池的活跃数量。下落速度范围调整初始化时vy的随机范围。风力强度控制水平速度vx的偏移量或全局风力系数。雪花大小范围控制radius的随机范围。整体透明度调整cv::addWeighted中雪花层的权重系数。我常用的调试方法是在循环内监听键盘事件。比如按‘’键增加雪花数量按‘-’键减少按‘w’‘s’键调整风速等。通过cv::waitKey获取按键然后动态修改对应的全局变量下一帧立刻就能看到效果变化。这比改代码、重新编译、运行要高效得多。5.3 常见问题与排查实录在实际编码和运行中你可能会遇到下面这些问题程序运行后窗口一闪而过/立刻关闭原因控制台程序执行完main函数就退出了。解决在main函数末尾return 0;之前加上一个无限循环并在循环中通过cv::waitKey(1)来等待按键退出。或者在显示图像的cv::imshow后使用cv::waitKey(0)。OpenCV报错未找到opencv_world4xxd.lib原因项目配置的附加依赖项库文件名与实际存在的lib文件不匹配或者库目录配置错误。排查首先去你配置的库目录如D:\opencv\build\x64\vc16\lib下确认是否存在这个文件。注意Debug版本带d后缀Release版本不带。然后在VS项目属性中检查“配置管理器”里当前活动解决方案配置是Debug还是Release是否与链接的库匹配。雪花绘制有严重的拖影/残影原因没有在绘制新的一帧前清除旧的雪花绘制层。每一帧都在上一帧的绘制结果上叠加导致雪花轨迹残留。解决在每一帧循环的开始将雪花绘制层snow_layer用全透明Scalar(0,0,0,0)或者直接置零snow_layer.setTo(0)来清空。程序运行很卡帧率很低原因雪花数量太多或者绘制方法效率太低。排查与优化首先减少雪花数量看是否改善。其次使用cv::circle绘制时确保使用的厚度参数thickness是-1表示填充而不是默认的1描边描边计算量更大。最后考虑采用前面提到的“批量绘制”或“精灵绘制”等优化方法。积雪效果边缘锯齿严重不自然原因直接用矩形或未抗锯齿的线段绘制积雪。解决在绘制代表积雪的图形时使用cv::line并设置lineType参数为cv::LINE_AA抗锯齿线。或者在最终混合前对积雪高度图accumulation数组进行平滑滤波如高斯模糊再用平滑后的高度去绘制。叠加到摄像头画面后雪花只在部分区域显示原因摄像头读取的帧可能是3通道BGR的而你的雪花绘制层是4通道BGRA的。cv::addWeighted要求两个图像具有相同的通道数和尺寸。解决确保背景帧和雪花绘制层的通道数一致。可以将摄像头帧通过cv::cvtColor(background, background, cv::COLOR_BGR2BGRA)转换为4通道然后再进行混合。

相关新闻

2024最新Onu UI入门指南:从安装到第一个组件的完整教程

2024最新Onu UI入门指南:从安装到第一个组件的完整教程

2024最新Onu UI入门指南:从安装到第一个组件的完整教程 【免费下载链接】onu-ui Opinionated and lightweight UnoCSS ui library. 项目地址: https://gitcode.com/gh_mirrors/on/onu-ui Onu UI是一个基于UnoCSS的轻量级UI组件库,专为现代Web应用…

2026/10/12 1:55:45 阅读更多 →
紫罗兰工具箱与欧加网络助手:晶晨芯片设备刷机实战指南

紫罗兰工具箱与欧加网络助手:晶晨芯片设备刷机实战指南

最近在折腾一些老旧电视盒子、网络设备时,发现很多设备原厂系统限制多、广告多,或者功能单一。想要解锁更多玩法,比如安装第三方应用、搭建轻量级NAS、运行自定义系统,刷机几乎是必经之路。在这个过程中,一个名为“紫罗…

2026/10/12 9:11:48 阅读更多 →
10分钟搞定UE5源码调试:Rider+调试符号配置与路径映射实战

10分钟搞定UE5源码调试:Rider+调试符号配置与路径映射实战

1. 项目概述:为什么UE5源码调试需要新思路? 如果你正在用Unreal Engine 5进行C开发,并且尝试过调试引擎源码,那你一定对那个漫长的等待过程记忆犹新。传统的调试方式,比如在Visual Studio里直接打开UE5的解决方案进行编…

2026/10/16 15:11:47 阅读更多 →

最新新闻

Java后端JSON与HTTP交互全链路解析:从序列化到接口排查实战

Java后端JSON与HTTP交互全链路解析:从序列化到接口排查实战

做后端开发几年后,我发现自己招聘新人时最头疼的一件事,就是很多人能把框架API背得滚瓜烂熟,但遇到一个真实的数据交互问题时,却不知道问题到底出在哪一层。比如一个接口返回了,前端说解析不了JSON,后端查了…

2026/10/16 20:33:59 阅读更多 →
上下文窗口越大RAG越重要:检索增强生成原理与选型落地

上下文窗口越大RAG越重要:检索增强生成原理与选型落地

简介:基于DeepSeek的本地知识库构建指南,面向个人开发者、企业技术决策者及AI应用落地人员,系统讲解大模型应用中最成熟的RAG技术原理、主流方案选型与具体操作流程。资源以PDF文档单独收录,文件总数1个,压缩包大小约2…

2026/10/16 20:33:59 阅读更多 →
VLA模型安全对齐:从软性奖励到硬性约束的受限学习之路

VLA模型安全对齐:从软性奖励到硬性约束的受限学习之路

1. 为什么要关注VLA模型的安全对齐最近几年,Vision-Language-Action Model(视觉-语言-动作模型,简称VLA)可以说是机器人学习领域最火热的方向之一。从谷歌的RT系列到各种开源的多模态指令跟随模型,VLA模型的思路非常直…

2026/10/16 20:33:59 阅读更多 →
大模型如何判断何时停止阅读?长上下文推理效率优化新思路

大模型如何判断何时停止阅读?长上下文推理效率优化新思路

最近在某个国际顶级AI会议的预印本里看到一篇标题特别扎眼的工作:Language Models (Mostly) Know When to Stop Reading。乍一看像个“行为学”研究,其实是一篇正儿八经的模型推理效率工作。它想回答一个特别接地气的问题:语言模型在读一段长…

2026/10/16 20:33:59 阅读更多 →
AI项目失败的根源:技术决策者的哲学缺位

AI项目失败的根源:技术决策者的哲学缺位

1. 这不是技术补习班,而是一场认知重启“AI小组负责人不懂AI”——这句话最近在不少科技公司内部悄悄流传,表面看是个黑色幽默,实则戳中了当前AI落地最隐蔽也最危险的软肋:技术决策者与技术本质之间的认知断层。我去年接手一个跨部…

2026/10/16 20:33:59 阅读更多 →
初中物理虚拟实验教学资源包实用指南:仿真交互与课堂落地

初中物理虚拟实验教学资源包实用指南:仿真交互与课堂落地

简介:面向初中生的NB初中物理虚拟实验平台,是一套基于计算机仿真技术的互动教学资源,适合学生、教师及实验条件有限的学校使用。资源围绕力学、热学、光学、电学、声学、能量转换、简单机械等内容设计,通过模拟真实实验环境&#…

2026/10/16 20:32:59 阅读更多 →

日新闻

个人 AI Agent 平台接入 TaoToken:统一 Key 与 API 通道的配置大纲

个人 AI Agent 平台接入 TaoToken:统一 Key 与 API 通道的配置大纲

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 0:00:05 阅读更多 →
信号与系统频域分析作业解题指南

信号与系统频域分析作业解题指南

1. 作业背景与核心要求解析信号与系统作为电子信息类专业的核心基础课,其作业设计往往直接关联课程的核心知识框架。2026年春季第六次作业的布置,通常对应着课程进展到频域分析的关键阶段。根据常规教学进度推测,本次作业可能涉及以下核心内容…

2026/10/16 0:00:05 阅读更多 →
Django MVT实战:从零构建图书借阅系统,彻底搞懂Model-View-Template分层

Django MVT实战:从零构建图书借阅系统,彻底搞懂Model-View-Template分层

1. 从一个"四不像"的练手项目说起如果你已经看完了Django的官方教程前几章,跟着敲完了投票应用,大概会有一种"我好像会了,又好像什么都不会"的割裂感。教程里每个知识点都是拆开的——这一章讲模型,下一章讲视…

2026/10/16 0:00:05 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/15 16:18:54 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/15 19:41:51 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/16 15:04:24 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/15 0:14:36 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 3:49:43 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 14:23:36 阅读更多 →