当前位置：首页 > news >正文

【CSS in Depth 2 精译_079】第 13 章：渐变、阴影与混合模式概述 + 13.1：CSS 渐变效果（上）——使用多个颜色节点

news 来源：原创 2025/6/14 13:47:51

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第四部分视觉增强技术 ✔️
【第 13 章渐变、阴影与混合模式】 ✔️
13.1 渐变 ✔️
13.1.1 使用多个颜色节点（上） ✔️
13.1.2 颜色插值方法（中）
13.1.3 径向渐变（下）
13.1.4 锥形渐变（下）

文章目录

第 13 章渐变、阴影与混合模式 Gradients, shadows, and blend modes
- 13.1 渐变 Gradients
- - 13.1.1 使用多个颜色节点 Multiple color stops
  - - 13.1.1.1 条纹 Stripes
    - 13.1.1.2 重复渐变 Repeating gradients

《CSS in Depth》新版封面

《CSS in Depth》新版封面

第 13 章渐变、阴影与混合模式 Gradients, shadows, and blend modes

本章概要

线性渐变、径向渐变及锥形渐变
不同色彩空间下的颜色插值方法
盒阴影与文字阴影
背景图片的尺寸调整与定位
通过混合模式实现背景与内容的组合

至此，我们已经介绍了很多 CSS 知识，想必您已经对 CSS 的基本工作原理有了更深入的理解。我们不仅介绍了多种布局方法，也花了不少精力去考察如何让样式代码组织高效且易于维护，甚至还从头开始探讨了创建一个网站必备的核心要素。最后还教会您如何关注间距、排版及其他页面设计相关的细节。

接下来的两章内容将重点介绍特定页面效果的实现技巧，以及增强页面视觉趣味性的相关方法。其中一些效果您今后可能会经常用到，特别是渐变与阴影方面的内容；而其他效果可能只是偶尔会考虑。但可以肯定的是，您绝不会将所有特效都堆到一处。因此后续内容也不会创建面面俱到的综合示例页，而是聚焦单独的示例来进行讲解。

以图 13.1 所示的按钮为例，这里用到了渐变背景和投影两种特效，使页面具有了立体感。背景色从顶部的中度蓝（颜色值 #57b）过渡到了底部的深蓝（#148）。您可能甚至都没留意到这层渐变，但是再配上底部和右侧边缘的阴影效果，就让按钮整体呈现出了立体感。

图 13.1 设置了渐变背景和阴影效果的示例按钮

【图 13.1 设置了渐变背景和阴影效果的示例按钮】

本章将重点介绍渐变与阴影的工作原理，并探讨几个实际应用。然后再介绍一种非常有意思的页面特效，称为 混合模式（blend modes）。它可以把多个背景图片和背景色按照不同的方式混合在一起使用。

13.1 渐变 Gradients

前面的章节已经介绍了纯色背景和一些背景图片的使用方法，但是 background 属性还有很多功能有待探索。其实，background 是以下八个样式属性的简写：

background-image —— 从某个文件或者生成的某个渐变色来设置一张图片。
background-position —— 指定背景图片的初始位置。
background-size —— 指定元素内背景图片的渲染尺寸。
background-repeat —— 决定在需要填充整个元素时，是否平铺图片。
background-origin —— 指定定位背景的参考系是相对于元素的边框盒 border-box 而言的、还是其内边距盒 padding-box（初始值）、抑或是其内容盒 content-box。
background-clip —— 指定背景是否应该填充元素的边框盒 border-box（初始值）、内边距盒 padding-box 或者内容盒 content-box。
background-attachment —— 指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。注意，值为 fixed 时可能会对页面性能带来消极影响。
background-color —— 指定纯色背景，并渲染到背景图片的下方。

本章将介绍上述属性。此刻您需要了解的是，使用简写属性（background）虽然可以设置指定的样式，但同时也会把其他属性值重置为初始值。因此，在需要对多个背景属性进行操作时，我往往会单独设置想要的属性。

background-image 属性非常有意思。除了之前介绍的通过 URL 来引用某个图片的用法外（第 7 章中的 background-image: url(coffee-beans.jpg)），该属性还可以接受一个渐变函数。例如，定义一个从白色过渡到蓝色的渐变色，如图 13.2 所示。

图 13.2 由一种颜色线性渐变到另一种颜色的效果示意图

【图 13.2 由一种颜色线性渐变到另一种颜色的效果示意图】

渐变是一个非常有用的特效。我们先来看看渐变的工作原理，然后在列举几个实际案例。要尝试渐变设置，需要创建一个新页面和样式表。添加代码清单 13.1 中的 CSS 样式，其中用到了 linear-gradient() 函数来定义渐变效果。

代码清单 13.1 基础线性渐变示例

.fade {height: 200px;width: 400px;background-image: linear-gradient(to right, white, blue); /* 从左至右、从白色渐变为蓝色 */
}

渐变效果其实就是背景图片，渐变本身不会影响元素的尺寸大小。为了方便演示，我给该元素明确设置了宽高。该元素是没有内容的，因此必须手动给定一个高度才能看到渐变效果。

linear-gradient 函数通过三个参数来定义渐变效果：角度（angle）、起始颜色（starting color）与终止颜色（ending color）。本例中的角度值即 to right，表示渐变效果将从元素左侧开始（即白色），平滑过渡到右侧（即蓝色）。此外，也可以采用其他颜色表示方法，例如十六进制法（#0000ff）或者 OKLCH 值（oklch(45% 0.31 264deg)）或者关键字 transparent。试根据代码清单 13.2 同步更新页面元素，查看本地渐变效果。

代码清单 13.2 带渐变背景效果的示例元素 HTML 代码

<!doctype html>
<html lang="en-US">
<head><meta charset="utf-8"><link rel="stylesheet" href="./style.css">
</head>
<body><div class="fade"></div><!-- 带渐变背景效果的示例元素 -->
</body>
</html>

CSS 提供了多种方式来指定渐变的角度值。在本例中，我们使用了 to right，当然也可以使用 to top 或者 to bottom，甚至可以指定某个对角（corner），例如 to bottom right，表示渐变效果将从元素的左上角开始，逐渐过渡到元素右下角。

为了更精确地控制角度，也可以使用更具体的单位，例如“度”。角度值 0deg 表示垂直向上（相当于 to top）；比它更大的角度值会沿着顺时针方向变动，因此 90deg 表示向右渐变，180deg 表示向下渐变，360deg 又回到了向上渐变。因此，代码清单 13.3 中的声明与前面的示例等价。

代码清单 13.3 使用度（deg）为单位的渐变示例代码

.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, white, blue); /* 这里的 90deg 相当于前面的 to right */
}

度是最常用的单位，此外还有一些其他单位可以用来表示角度值，如下所示：

rad —— 以弧度（radians）为单位，对于一个完整的圆，其弧度制为 2π，约合 6.2832 弧度。
turn —— 表示环绕圆周的圈数（full turns）。一圈相当于 360 度（即 360deg）。角度不足一圈可以用小数表示，例如 0.25turn 相当于 90deg。
grad —— 以梯度（gradians）为单位，一个完整的圆是 400 梯度（即 400grad），因此 100grad 即对应 90deg。

可以尝试一下在渐变中设置不同的角度值，看看效果如何。

注意

以上介绍的角度单位适用于任意需要设置 CSS 角度值的地方，包括各种颜色表示法中的色调的角度值，例如 oklch(45% 0.31 0.75turn) 就是一个合法的 OKLCH 颜色值。

13.1.1 使用多个颜色节点 Multiple color stops

大部分渐变只涉及两种颜色，从一种颜色过渡到另一个即可。也可以定义包含多个颜色的渐变效果，其中每个颜色都可以成为一个 颜色节点（color stop）。图 13.3 为包含了三种颜色节点（蓝绿色、白色、蓝色）的渐变样式示例。

图 13.3 包含三个颜色节点的渐变色效果

【图 13.3 包含三个颜色节点的渐变色效果】

通过向 linear-gradient() 函数添加更多颜色，就可以插入多个颜色节点。试根据代码清单 13.4 所示代码同步更新样式表，然后在页面上查看渐变效果。

代码清单 13.4 包含多个颜色节点的线性渐变样式声明

.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg, turquoise, white, blue); /* 指定多个颜色节点 */
}

一个渐变样式可以接受任意数量的颜色节点，各节点间通过逗号分隔。渐变函数会自动均匀平铺这些颜色节点。在本例中，最左侧（即 0% 位置）从蓝绿色开始，然后过渡到中间位置（即 50%）的白色，再到最右侧（即 100%）的蓝色。我们也可以在渐变函数中为每个颜色节点手动指定位置。例如代码清单 13.4 中的渐变样式等效于以下代码：

linear-gradient(90deg, turquoise 0%, white 50%, blue 100%)

上述代码不难看出，颜色节点的位置是可以按需调节的，不必非得均匀分布。指定具体位置时也不必非得使用百分数，换成像素单位制、相对单位 em 以及其他长度单位也是完全有效的写法。

13.1.1.1 条纹 Stripes

如果在同一个位置设置了两个颜色节点，那么渐变会直接从一种颜色变为另一种颜色，而不是平滑过渡。如图 13.4 所示的渐变色效果，从蓝绿色开始，直接变为白色，随后又变为蓝色。整体呈现条纹状。

图 13.4 通过在同一位置放置两种颜色节点的渐变声明实现的条纹效果

【图 13.4 通过在同一位置放置两种颜色节点的渐变声明实现的条纹效果】

实现该渐变效果的样式代码如代码清单 13.5 所示。注意渐变中有四个颜色节点，其中两个为白色。

代码清单 13.5 同一个位置放置两个颜色节点，从而实现条纹效果

.fade {height: 200px;width: 400px;background-image: linear-gradient(90deg,/* 相同位置上的各颜色节点： */turquoise 40%, white 40% 60%, blue 60%);
}

第一个颜色节点是位于 40% 处的蓝绿色（turquoise），所以纯色效果从左侧边缘一直延伸到 40% 处；又因为第二个颜色节点为白色，且同样位于 40% 位置，因此渐变从这里开始变为白色；随后另一个白色节点位于 60% 处，从而令 40% 到 60% 之间的渐变效果均为白色。最后一个颜色节点也位于 60% 处，颜色为蓝色，因此从这里开始突变为蓝色，并一直延伸到元素右边缘。

这些颜色节点的位置同样可以换成任何有效的长度值，因此除了使用 40%，还可以换成 160px 或者 10em 等。

13.1.1.2 重复渐变 Repeating gradients

尽管前面的例子只是为了演示，但也可以用来实现一些有趣的效果，特别是搭配另一个略有不同的渐变函数 repeating-linear-gradient() 时。该函数与 linear-gradient() 函数的用法基本相同，唯一的区别在于该函数能够重复渲染。利用这一特性可以实现类似理发店门外的旋转招牌效果，非常适合作为进度条的样式（如图 13.5）。

图 13.5 使用重复线性渐变的条纹状进度条

【图 13.5 使用重复线性渐变的条纹状进度条】

对于重复渐变，最好使用特定的长度而不是百分比值，因为设置的值决定了要重复渲染的图片尺寸。相应的条纹效果样式代码详见代码清单 13.6。试根据以下代码同步更新本地样式表。

代码清单 13.6 创建沿对角线倾斜的条纹进度条

.fade {height: 1em;width: 400px;/* 浅蓝与深蓝色交替生成条纹效果 */background-image: repeating-linear-gradient(-45deg,oklch(60% 0.1 257deg) 0px 10px,oklch(40% 0.1 257deg) 10px 20px);border-radius: 0.3em;
}

有时，将一个半成品的代码片段改造成自己需要的效果，比从零开始实现要容易一些。您可以在 CSS-TRICKS 网站的这篇 Stripes in CSS 文章中找到更多灵感。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价￥461.00	起步价￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型（已完结）
3.1 常规文档流
3.2 盒模型
3.3 元素的高度
3.4 负的外边距
3.5 外边距折叠
3.6 容器内的元素间距问题
3.7 本章小结

第四章 Flexbox 布局（已完结）
4.1 Flexbox 布局原理
4.2 弹性子元素的大小
4.3 弹性布局的方向
4.4 对齐、间距等细节处
4.5 本章小结

第五章网格布局（已完结）
5.1 构建基础网格
5.2 网格结构剖析（上）
5.2.1 网格线的编号（下）
5.2.2 网格与 Flexbox 配合（下）

5.3 两种替代语法
5.3.1 命名网格线
5.3.2 命名网格区域

5.4 显式网格与隐式网格（上）
5.4.1 添加变化（中）
5.4.2 让网格元素填满网格轨道（下）

5.5 子网格（全新增补内容）
5.6 对齐相关的属性
5.7 本章小结

第六章定位与堆叠上下文（已完结）
6.1 固定定位
6.1.1 创建一个固定定位的模态对话框
6.1.2 在模态对话框打开时防止屏幕滚动
6.1.3 控制定位元素的大小

6.2 绝对定位
6.2.1 关闭按钮的绝对定位
6.2.2 伪元素的定位问题

6.3 相对定位
6.3.1 创建下拉菜单（上）
6.3.2 创建 CSS 三角形（下）

6.4 堆叠上下文与 z-index
6.4.1 理解渲染过程与堆叠顺序（上）
6.4.2 用 z-index 控制堆叠顺序（上）
6.4.3 深入理解堆叠上下文（下）

6.5 粘性定位
6.6 本章小结

第七章响应式设计（已完结）
7.1 移动端优先设计原则（上篇）
7.1.1 创建移动端菜单（下篇）
7.1.2 给视口添加 meta 标签（下篇）

7.2 媒体查询（上篇）
7.2.1 深入理解媒体查询的类型（上篇）
7.2.2 页面断点的添加（中篇）
7.2.3 响应式列的添加（下篇）

7.3 流式布局
7.4 响应式图片
7.5 本章小结

第八章层叠图层及其嵌套
8.1 用 layer 图层来操控层叠规则（上篇）
8.1.1 图层的定义（上篇）
8.1.2 图层的顺序与优先级（下篇）
8.1.3 revert-layer 关键字（下篇）

8.2 层叠图层的推荐组织方案
8.3 伪类 :is() 和 :where() 的用法
8.4 CSS 嵌套的使用
8.4.1 嵌套选择器的使用
8.4.2 深入理解嵌套选择器
8.4.3 媒体查询及其他 @规则的嵌套

8.5 本章小结

第九章 CSS 的模块化与作用域
9.1 模块的定义
9.1.1 模块和全局样式
9.1.2 一个简单的 CSS 模块
9.1.3 模块的变体
9.1.4 多元素模块

9.2 将模块组合为更大的结构
9.2.1 模块中多个职责的拆分
9.2.2 模块的命名

9.3 CSS 的作用域
9.3.1 CSS 作用域的就近原则
9.3.2 划定作用域的边界
9.3.3 CSS 中的隐式作用域
9.3.4 关于 CSS 作用域与层叠图层

9.4 CSS 模式库
9.5 本章小结

第十章 CSS 容器查询
10.1 容器查询的一个简单示例
10.1.1 容器尺寸查询的用法

10.2 深入理解容器
10.2.1 容器的类型
10.2.2 容器的名称
10.2.3 容器与模块化 CSS

10.3 与容器相关的单位
10.4 容器样式查询的用法
10.4.1 将模块与所在容器解耦
10.4.2 减少重复代码

10.5 本章小结

第 11 章颜色与对比
11.1 通过对比进行交流
11.1.1 模式的建立
11.1.2 还原设计稿

11.2 颜色的定义
11.2.1 色域与色彩空间
11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）

11.3 利用 OKLCH 处理颜色（上篇）
11.3.4 从页面其他颜色衍生出新颜色（下篇）

11.4 思考字体颜色的对比效果
11.5 本章小结

第 12 章 CSS 排版与间距
12.1 间距设置
12.1.1 使用 em 还是 px
12.1.2 对行高的深入思考
12.1.3 行内元素的间距设置

12.2 Web 字体
12.3 谷歌字体
12.4 @font-face 的工作原理
12.4.1 字体格式与回退处理
12.4.2 同一字型的多种变体形式

12.5 性能因素考量
12.5.1 font-display 属性解析
12.5.2 可变字体的用法

12.6 调整字间距，提升可读性
12.6.1 正文的字间距
12.6.2 标题、小元素和间距

12.7 本章小结

附录
附录A：CSS 选择器参考
附录B：CSS 预处理器简介

【CSS in Depth 2 精译_079】第 13 章：渐变、阴影与混合模式概述 + 13.1：CSS 渐变效果（上）——使用多个颜色节点

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分视觉增强技术 ✔️【第 13 章渐变、阴影与混合模式】 ✔️ 13.1 渐变 ✔️ 13.1.1 使用多个颜色节点（上） ✔️13.1.2 颜色插值方法（中）13.1…...

编程日记 2025/6/2 0:51:11

汽车供应链 “剧变”开始，“智能感知潜在龙头”诞生

智能汽车产业链“剧变”已经开启，智能感知软硬件能力的权重正在不断被放大。比如满足高阶泊车的第二代AK2超声波传感器、满足人机共驾场景需求的电子外后视镜（CMS）、iTOF 3D成像视觉感知（用于舱内监控）等新产品&…...

编程日记 2025/6/2 18:31:07

3大Excel免费功能

推荐几个免费excel图表绘制工具 Power Map Power Map是Excel的内置功能 Power Map可在Windows用户的Excel 2013或者Excel 2016或者Office 365中使用，如下图，看案例动态地图1 动态地图2...

编程日记 2025/5/29 10:52:20

linux centos 7 安装 mongodb7

MongoDB 是一个基于文档的 NoSQL 数据库。 MongoDB 是一个文档型数据库，数据以类似 JSON 的文档形式存储。 MongoDB 的设计理念是为了应对大数据量、高性能和灵活性需求。 MongoDB使用集合（Collections）来组织文档（Documents&a…...

编程日记 2025/6/4 14:22:12

docker 安装 mongo 命令

## 拉取 MongoDB 镜像docker pull mongo:latest## 挂载文件目录：mkdir -p /usr/local/mongo/configmkdir -p /usr/local/mongo/datamkdir -p /usr/local/mongo/logstouch /usr/local/mongo/config/mongod.confchmod 777 /usr/local/mongo## 配置文件##vim …...

编程日记 2025/6/1 22:10:59

问题记录：CH592 PB6/PB10中断输入，无法从掉电模式唤醒

问题描述： PB6上拉输入，连接按键 PB10上拉输入，连接外部充电芯片状态管脚。不充电时开漏输出，充电时低电平配置PB6和PB10为上拉输入，下降沿触发中断，然后进入掉电模式理论上： PB6按键触发…...

编程日记 2025/6/1 17:05:47

搭建分布式Spark集群

title: 搭建分布式Spark集群 date: 2024-11-29 12:00:00 categories: - 服务器 tags: - Spark - 大数据搭建分布式Spark集群本次实验环境：Centos 7-2009、Hadoop-3.1.4、JDK 8、Zookeeper-3.6.3、scala-2.11.5、Spark-3.2.1 功能规划 MasterSlave1Slave2主节点…...

编程日记 2025/6/1 20:27:55

BTP Integration Suite CPI Apache Camel

官网文档： https://help.sap.com/docs/integration-suite/sap-integration-suite/what-is-sap-integration-suite CPI 云集成(CPI)有以下几个特性： SAP Cloud Integration通过消息交换支持端到端流程集成。它基于Apache软件基金会的开源框架Camel。 …...

编程日记 2025/6/1 12:42:47

Vue-Form-Making：Star5.5k，一款强大的Vue表单设计器,适用于低代码平台、自定义表单

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Vue-Form-Making是一个开源的Vue表单设计器，它允许用户通过拖拽方式快速生成表单，支持多种表单组件和布局。核心功能 1. 拖拽…...

编程日记 2025/6/1 13:41:05

使用 Vite 和 Redux Toolkit 创建 React 项目

文章目录 1. 创建 React 项目2. 安装依赖3. 创建状态仓库user.js创建 shopSlice 4. 在状态仓库中合并切片5. 在入口文件中导入并使用 store6. 获取切片中的数据7. 修改数据结尾在本教程中，我们将通过使用 Vite 创建一个 React 项目，并结合 Redux Toolki…...

编程日记 2025/6/3 0:46:31

jmeter连接mysql

查询mysql数据库版本 SELECT VERSION(); 下载jmeter mysql 驱动jar包，版本低于mysql版本，放在jmeter的lib 路径下 MySQL :: Download MySQL Connector/J (Archived Versions) 添加JDBC Connection Configuration 填写 variable name 及数据库信息注意…...

编程日记 2025/5/30 3:12:13

sql中case when若条件重复执行的顺序

sql case when若条件重复执行的顺序在 SQL 中，如果你在 CASE 表达式中定义了多个 WHEN 子句，并且这些条件有重叠，那么 CASE 表达式的执行顺序遵循以下规则： （1）从上到下：SQL 引擎会按照 CASE …...

编程日记 2025/6/1 5:35:09

代码随想录算法训练营第五十天 | 图 | 并查集

Day 50 总结自己实现中遇到哪些困难今日收获，记录一下自己的学习时间 15:00 - 16:0018:00 - 19:45 图论深度收缩 & 广度搜索 BFS, DFS, visited数组, 四个方向并查集数组代表链表, 用集合中的一个元素代表集合的根最小生成树拓扑排序最短路径算法图论基…...

编程日记 2025/6/2 15:02:33

tryhackme——Pre Security(安检前)-Offensive Security（进攻性安全）

这里我用的edge的插件闪击翻译。这里我英语不好，所以用这个可以顺便学习下英语。任务一：What is Offensive Security?（什么是进攻性安全?） 很简单啊，通过阅读，知道以下哪个选项更能代表您模拟黑客操作…...

编程日记 2025/6/2 19:32:10

vue iframe进行父子页面通信并切换URL

使用通义千问提问后得到一个很好的示例。需求是2个项目需要使用同一个面包屑进行跳转，其中一个是iframe所在的项目，另一个需要通过地址访问。通过 window.parent.postMessage ，帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通…...

编程日记 2025/6/4 12:23:51

Cesium 无人机航线规划（区域航线）

区域航线，即划定一片区域一键巡查这里选择点几个点，形成的区域内计算规划航线...

编程日记 2025/5/28 5:29:53

[NOIP2016 普及组] 海港 -STL-队列queue

[NOIP2016 普及组] 海港题目背景 NOIP2016 普及组 T3 题目描述小 K 是一个海港的海关工作人员，每天都有许多船只到达海港，船上通常有很多来自不同国家的乘客。小 K 对这些到达海港的船只非常感兴趣，他按照时间记录下了到达海港的每一…...

编程日记 2025/6/2 14:58:21

前端页面导出word

html-docx-js bug: vite使用html-docx.js会报错，点击下载上方文件替换即可正文 npm install html-docx-js -S npm install file-saver -S<template><div id"managerReport">word内容......</div> </template><script>&l…...

编程日记 2025/6/1 21:01:57

C++中的深拷贝和浅拷贝

浅拷贝浅拷贝：就是简单的赋值操作。浅拷贝问题：如果有指针指向堆区内存时，不同对象的指针成员指向同一块堆区内存，当对象释放时，该堆区内存会被释放两次。当一个对象修改堆区内存是，另一个对象也随之变…...

编程日记 2025/6/3 21:57:37

MobileLLM开发安卓AI的体验（一）

MobileLLM是一个在安卓端跑的大语言模型，关键它还有调动api的能力 https://github.com/facebookresearch/MobileLLM 项目地址是这个。看了下，似乎还是中国人团队 article{liu2024mobilellm, title{MobileLLM: Optimizing Sub-billion Parameter Langua…...

编程日记 2025/5/31 22:23:35

MySQL的并发控制与MVCC机制深度解析

目录 1. MySQL中的并发问题2. 数据库的隔离级别3. MVCC（多版本并发控制）机制3.1 MVCC的实现原理3.2 Read View详解3.3 当前读与快照读 4. MVCC在不同隔离级别下的工作方式5. MVCC解决幻读问题6. MVCC的优缺点优点：缺点： 7. MVCC在…...

编程日记 2025/6/4 17:26:20

搭建Tomcat（六）---Response的实现

目录引入一、前端项目容器的搭建重建项目: 1.创建一个新的项目： 2.创建HTML文件 3.将先前编写的所有tomcatJava文件挪过来二、配置java文件 1.重启一下MyTomcat 2.配置两个工具包 ①FileUtil ②ResponseUtil（响应头） 三、处理…...

编程日记 2025/5/31 1:06:39

深度学习物体检测之YOLOV5源码解读

V5比前面版本偏工程化,项目化,更贴合实战一.V5版本项目配置 (1)整体项目概述首先github直接查找yolov5，下载下来即可。在训练时，数据是怎么处理的？网络模型架构是怎么设计的(如各层的设计)？yolov5要求是大于python3.8与大于等…...

编程日记 2025/6/2 11:26:32

Ubuntu22.04配置3D gaussian splatting

这篇博客提供了3D gaussian splatting在新安装Ubuntu上的配置过程。 1.拉仓库 2.安装显卡驱动和cuda版本 3.安装Pytorch 4.安装Pycharm和配置Python 5.安装附加依赖项（方法一） 6.安装Anaconda（方法二） 7.测试 1.拉仓库 # HT…...

编程日记 2025/6/2 17:49:38

【Python知识】python基础-关于异常处理

python的异常处理知识概览基本用法自定义异常捕获特定异常信息异常抛出概览在Python中，异常处理是通过try、except和finally等关键字来实现的。这些关键字允许你捕获和处理在程序运行时可能出现的错误和异常情况，从而避免程序崩溃，并允许…...

编程日记 2025/6/3 4:02:04

golang 使用gzip对json例子

package main import ( "bytes" "compress/gzip" "encoding/json" "fmt" "io" "log" ) // User 结构体定义 type User struct { ID int json:"id" Name string json:"name" Age in…...

编程日记 2025/5/31 10:53:56

qt-C++笔记之自定义类继承自 `QObject` 与 `QWidget` 及开发方式详解

qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式详解 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QW…...

编程日记 2025/6/1 23:16:32

利用git上传项目到GitHub

GitHub是基于git实现的代码托管。git是目前最好用的版本控制系统了，非常受欢迎，比之svn更好。 GitHub可以免费使用，并且快速稳定。利用GitHub，你可以将项目存档，与其他人分享交流，并让其他开发者帮助你一…...

编程日记 2025/6/4 13:54:58

机器学习预处理-表格数据的空值处理

机器学习预处理-表格数据的空值处理机器学习预处理-表格数据的分析与可视化中详细介绍了表格数据的python可视化，可视化能够帮助我们了解数据的构成和分布，是我们进行机器学习的必备步骤。上文中也提及，原始的数据存在部分的缺失&#xff0…...

编程日记 2025/6/2 20:05:12

python学opencv|读取图像（十二）BGR图像转HSV图像

【1】引言前述已经学习了opencv中图像BGR相关知识，文章链接包括且不限于下述： python学opencv|读取图像（六）读取图像像素RGB值_opencv读取灰度图-CSDN博客 python学opencv|读取图像（七）抓取像素数据顺利…...

编程日记 2025/5/31 4:58:08

【C语言】库函数常见的陷阱与缺陷(六)：输入输出函数

目录一、printf 函数 1.1. 功能与用法 1.2. 陷阱与缺陷 1.3. 安全使用建议 1.4. 代码示例二、scanf 函数 2.1. 功能与用法 2.2. 陷阱与缺陷 2.3. 安全使用建议 2.4. 代码示例三、gets 函数 3.1. 功能与用法 3.2. 陷阱与缺陷 3.3. 安全使用建议 3.4. 代码示例…...

编程日记 2025/5/28 23:28:37

sunset: midnight

https://www.vulnhub.com/entry/sunset-midnight,517/ 主机发现端口扫描探测存活主机，8是靶机 nmap -sP 192.168.56.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-12-05 16:49 CST Nmap scan report for 192.168.56.1 …...

编程日记 2025/5/30 7:33:55

CSS Backgrounds(背景)

CSS Backgrounds(背景) Introduction(介绍) CSS backgrounds play a crucial role in web design, allowing developers to apply colors, images, and other decorative elements to the background of HTML elements. This enhances the visual appeal of web pages and he…...

编程日记 2025/6/3 7:51:14