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

3_CSS3 渐变 --[CSS3 进阶之路]

news 来源：原创 2025/6/16 15:54:30

CSS3 引入了渐变（gradients），它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变：

  1. 线性渐变（Linear Gradients）：颜色沿着一条线性路径变化，可以是水平、垂直或者对角线方向。
  2. 径向渐变（Radial Gradients）：颜色从一个起点开始向外扩散，形成圆形或者椭圆形的渐变效果。

线性渐变

线性渐变 - 从上到下

这里有一个简单的 CSS3 线性渐变的例子，它从上到下应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景，这个背景的颜色将从蓝色平滑地过渡到绿色。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(to bottom, blue, green);
}

在这个例子中：

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(to bottom, blue, green); 创建了一个从上（蓝色）到下（绿色）的线性渐变背景。

如果你想要在网页中看到效果，你需要把这个 CSS 样式应用到你的 HTML 文档中，并确保 .gradient-box 类被正确应用到了你想要展示渐变效果的元素上。此外，如果你希望在实际项目中使用，可以考虑添加浏览器前缀以确保更好的兼容性，尽管最新的浏览器通常不需要这些前缀。

这是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(top, blue, green); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(top, blue, green); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(top, blue, green); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom, blue, green); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码包含了旧版浏览器的支持，不过对于现代浏览器来说，只需要最后一个 linear-gradient 即可。

线性渐变 - 从左到右

下面是一个简单的 CSS3 线性渐变的例子，它从左到右应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景，这个背景的颜色将从红色平滑地过渡到紫色。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, red, purple);
}

在这个例子中：

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(to right, red, purple); 创建了一个从左（红色）到右（紫色）的线性渐变背景。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, red, purple); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, red, purple); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, red, purple); /* Firefox 3.6 - 15 */background: linear-gradient(to right, red, purple); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从红色逐渐变为紫色的水平渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到从左到右的线性渐变效果。

线性渐变 - 对角

当然，下面是一个简单的 CSS3 线性渐变的例子，它从一个角到对角应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景，这个背景的颜色将从左上角（蓝色）平滑地过渡到右下角（橙色）。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(to bottom right, blue, orange);
}

在这个例子中：

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(to bottom right, blue, orange); 创建了一个从左上角（蓝色）到右下角（橙色）的对角线性渐变背景。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left top, blue, orange); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left top, blue, orange); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left top, blue, orange); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom right, blue, orange); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从蓝色逐渐变为橙色的对角渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到从左上角到右下角的线性渐变效果。

此外，如果你想让渐变的方向是从右上角到左下角，可以使用 to bottom left 或者 left bottom（旧版语法）作为方向参数。

使用角度

当你想要对线性渐变使用特定的角度时，你可以直接在 linear-gradient 函数中指定角度值。角度是从元素的中心开始测量的，并且0度指向垂直上侧，然后顺时针方向增加度数。

下面是一个 CSS3 线性渐变的例子，它使用了一个特定的角度来应用颜色的过渡。我们将创建一个背景，这个背景的颜色将从黄色平滑地过渡到紫色，渐变的角度是45度。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(45deg, yellow, purple);
}

在这个例子中：

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(45deg, yellow, purple); 创建了一个以45度角从黄色过渡到紫色的线性渐变背景。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(45deg, yellow, purple); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(45deg, yellow, purple); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(45deg, yellow, purple); /* Firefox 3.6 - 15 */background: linear-gradient(45deg, yellow, purple); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从黄色逐渐变为紫色的45度角线性渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到按照45度角变化的线性渐变效果。

请注意，角度可以是任何正值或负值，正角度表示顺时针方向，而负角度表示逆时针方向。例如 -45deg 将创建一个与 45deg 相反方向的渐变。

使用多个颜色节点

当你想要创建更复杂的线性渐变效果时，可以使用多个颜色节点（color stops）。每个颜色节点定义了在渐变路径上特定位置的颜色。你可以通过指定不同的颜色和它们的位置来控制渐变的外观。

下面是一个 CSS3 线性渐变的例子，它使用了多个颜色节点来创建一个从左到右的渐变，包含了红色、黄色、绿色、青色、蓝色和洋红色，并且每个颜色都有特定的位置。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, red 0%, /* 起始颜色 */yellow 25%, /* 第二个颜色，位于25%的位置 */green 50%, /* 第三个颜色，位于50%的位置 */cyan 75%, /* 第四个颜色，位于75%的位置 */blue 100% /* 结束颜色 */);
}

在这个例子中：

  • .gradient-box 是应用了多色线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景，其中包含6种颜色，每种颜色都在特定的百分比位置开始。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Firefox 3.6 - 15 */background: linear-gradient(to right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从红色逐渐过渡到其他颜色的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到从左到右的六色线性渐变效果。

此外，你可以自由地改变颜色的位置百分比或添加更多的颜色节点以达到你想要的效果。如果省略了颜色停止点的位置，则浏览器会平均分配这些颜色之间的空间。

使用透明度

在 CSS3 线性渐变中使用透明度可以通过设置颜色的 alpha 通道来实现，这允许你创建从完全不透明到半透明甚至完全透明的渐变效果。可以使用 rgba() 或者 hsla() 函数来指定带有透明度的颜色。

下面是一个简单的例子，展示了如何创建一个从左到右的线性渐变，该渐变从蓝色（完全不透明）平滑过渡到完全透明：

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, rgba(0, 0, 255, 1), /* 蓝色，完全不透明 */rgba(0, 0, 255, 0)  /* 蓝色，完全透明 */);
}

在这个例子中：

  • .gradient-box 是应用了线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景，其中起始颜色是蓝色并且完全不透明，而结束颜色是蓝色但完全透明。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Firefox 3.6 - 15 */background: linear-gradient(to right, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从蓝色逐渐变为透明的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到从左到右的蓝色至透明的线性渐变效果。

此外，你还可以混合不同透明度的颜色节点，以创造出更加复杂和丰富的视觉效果。例如，你可以创建一个三色渐变，其中中间颜色部分透明：

background: linear-gradient(to right, rgba(255, 0, 0, 1), /* 红色，完全不透明 */rgba(0, 255, 0, 0.5), /* 绿色，半透明 */rgba(0, 0, 255, 1) /* 蓝色，完全不透明 */
);

这样，你就可以创建出更有趣的渐变效果，适用于不同的设计需求。

重复的线性渐变

CSS3 提供了 repeating-linear-gradient 函数，它允许你创建一个重复的线性渐变背景。这意味着你可以定义一个短的渐变序列，然后它会沿着指定的方向重复。

下面是一个简单的例子，展示了如何创建一个从左到右的重复线性渐变，该渐变从红色平滑过渡到蓝色再回到红色，并且这个模式会不断重复：

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 100%;height: 200px;background: repeating-linear-gradient(to right, red, /* 起始颜色 */red 10px, /* 红色持续10px */blue 20px, /* 蓝色从10px开始到20px结束 */blue 30px /* 蓝色持续到30px */);
}

在这个例子中：

  • .gradient-box 是应用了重复线性渐变背景的一个 div 元素。
  • width: 100%; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: repeating-linear-gradient(...); 创建了一个从左到右的重复线性渐变背景，其中每一段渐变从红色过渡到蓝色，然后再回到红色，每个完整的渐变周期为30px（从红色到蓝色再到红色）。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 100%;height: 200px;background: -webkit-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Safari 5.1 - 6.0 */background: -o-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Opera 11.1 - 12.0 */background: -moz-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Firefox 3.6 - 15 */background: repeating-linear-gradient(to right, red, red 10px, blue 20px, blue 30px); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个全宽的盒子，高度为200像素，并且有从红色逐渐变为蓝色再变回红色的水平重复线性渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到从左到右的红蓝相间的重复渐变效果。

你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如，如果你希望渐变更细腻或更粗犷，可以调整颜色停止点之间的距离。

CSS3 径向渐变

径向渐变（Radial Gradients）在 CSS3 中用于创建从一个中心点向外扩散的渐变效果。你可以通过 radial-gradient 函数来定义这种类型的渐变。下面我将给出两个不同的径向渐变示例，以展示其多样性和灵活性。

示例 1: 简单的圆形径向渐变

这个例子会创建一个简单的圆形径向渐变，颜色从中心的白色逐渐变为边缘的蓝色。我们使用了默认的圆形形状和大小，并且没有指定位置，默认是从中心开始。

HTML:

<div class="gradient-box simple-radial"></div>

CSS:

.simple-radial {width: 200px;height: 200px;background: radial-gradient(circle, white, blue);
}

在这个例子中：

  • .simple-radial 是应用了径向渐变背景的一个 div 元素。
  • width: 200px; 和 height: 200px; 定义了该 div 的尺寸。
  • background: radial-gradient(circle, white, blue); 创建了一个从中心的白色到边缘的蓝色的圆形径向渐变。

示例 2: 椭圆径向渐变与自定义位置

这个例子展示了如何创建一个椭圆形的径向渐变，并且可以指定渐变的起点位置。我们将创建一个从左上角靠近中心的位置开始，颜色从浅黄色过渡到深橙色的渐变。

HTML:

<div class="gradient-box complex-radial"></div>

CSS:

.complex-radial {width: 300px;height: 200px;background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800);
}

在这个例子中：

  • .complex-radial 是应用了更复杂的径向渐变背景的一个 div 元素。
  • width: 300px; 和 height: 200px; 定义了该 div 的尺寸，创建了一个非正方形的区域，因此默认情况下会产生椭圆形的渐变。
  • background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); 创建了一个椭圆形的径向渐变，起始点位于距离左侧和顶部各20%的位置，颜色从浅黄色 (#ffeb3b) 渐变到深橙色 (#ff9800)。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的 HTML 文件，包含了上面两个示例：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {margin: 20px;display: inline-block;
}.simple-radial {width: 200px;height: 200px;background: -webkit-radial-gradient(circle, white, blue); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(circle, white, blue); /* Opera 11.1 - 12.0 */background: -moz-radial-gradient(circle, white, blue); /* Firefox 3.6 - 15 */background: radial-gradient(circle, white, blue); /* 标准语法 */
}.complex-radial {width: 300px;height: 200px;background: -webkit-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Opera 11.1 - 12.0 */background: -moz-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Firefox 3.6 - 15 */background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box simple-radial"></div>
<div class="gradient-box complex-radial"></div></body>
</html>

在这里插入图片描述

这段代码会创建两个相邻的盒子，每个都有不同的径向渐变效果。第一个是简单的圆形渐变，第二个是更复杂的椭圆形渐变，并且具有自定义的起点位置。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到两种不同风格的径向渐变效果。

重复的径向渐变

CSS3 也支持重复的径向渐变，这通过 repeating-radial-gradient 函数来实现。这个函数允许你定义一个短的径向渐变序列，然后它会从中心向外重复该序列。

下面是一个简单的例子，展示了如何创建一个重复的径向渐变。我们将创建一个从中心开始的渐变，颜色从白色过渡到灰色再回到白色，并且这个模式会不断重复，形成一种类似圆环的效果。

HTML:

<div class="gradient-box"></div>

CSS:

.gradient-box {width: 200px;height: 200px;background: repeating-radial-gradient(circle, white, /* 起始颜色 */white 10px, /* 白色持续10px */grey 10px, /* 灰色从10px开始 */grey 20px /* 灰色持续到20px */);
}

在这个例子中：

  • .gradient-box 是应用了重复径向渐变背景的一个 div 元素。
  • width: 200px; 和 height: 200px; 定义了该 div 的尺寸，你可以根据需要调整这些值。
  • background: repeating-radial-gradient(...); 创建了一个圆形的重复径向渐变背景，其中每一段渐变从白色过渡到灰色，然后再回到白色，每个完整的渐变周期为20px（从白色到灰色再到白色）。

为了确保在各种浏览器上的兼容性，你也可以添加带有前缀的版本，尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例，可以直接复制粘贴到你的 HTML 文件中查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {width: 200px;height: 200px;background: -webkit-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Safari 5.1 - 6.0 */background: -o-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Opera 11.1 - 12.0 */background: -moz-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Firefox 3.6 - 15 */background: repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* 标准语法 */
}
</style>
</head>
<body><div class="gradient-box"></div></body>
</html>

在这里插入图片描述

这段代码会创建一个200x200像素的盒子，并且有从白色逐渐变为灰色再变回白色的圆形重复径向渐变背景。如果你把这段代码放入你的HTML文件并打开它，你应该能够看到一个类似同心圆环的重复渐变效果。

你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如，如果你希望渐变更细腻或更粗犷，可以调整颜色停止点之间的距离。此外，你还可以使用不同的形状（如 ellipse）和大小（如 closest-side 或 farthest-corner），以及自定义起点位置来创造更加独特的视觉效果。

相关文章：

3_CSS3 渐变 --[CSS3 进阶之路]

CSS3 引入了渐变&#xff08;gradients&#xff09;&#xff0c;它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变&#xff1a; 线性渐变&#xff08;Linear Gradients&#xff09;&#xff1a;颜色沿着一条线性路径变化&#xff0c;可以是水平、垂直…...

编程日记 2025/6/3 10:09:18

uniapp 左右滑动切换Tab

各种开发会遇到很多奇葩的需求&#xff0c;今天这个是在页面 左右滑动&#xff0c;然后自动去切换Tab <viewtouchstart"touchStart"touchcancel"touchCancel"touchend"touchEnd"><components is"xxx"/></view>//---…...

编程日记 2025/6/3 14:03:35

STM32 FreeRTOS 任务创建和删除实验（动态方法）

动态创建，堆栈是在FreeRTOS管理的堆内存里，注意任务不要重复创建。 xxxxx_STACK_SIZE 128 uxTaskGetStackHighWaterMark()获取指定任务的任务栈的历史剩余最小值，根据这个结果适当调整启动任务的大小。 实验目标 学会 xTaskCreate( ) 和 vTaskDelete( ) 的使用： start_…...

编程日记 2025/6/3 14:02:11

宝塔面板 申请证书后 仍然提示不安全

证书显示有效&#xff0c;但是网站显示不安全 导致的原因是引入静态文件使用的是HTTP&#xff0c;查看方法为F12打开console控制台 可以看到静态文件全部都是HTTP 网站采用wordpress搭建&#xff0c;基于问题解决&#xff0c;其他方式搭建也是一样&#xff0c;处理掉所有的H…...

编程日记 2025/6/3 14:03:03

透明部署、旁路逻辑串联的区别

背景 需讨论防火墙到底是串联&#xff0c;还是旁挂。 通常串联指的就是“透明部署”&#xff0c;旁挂指的就是“逻辑串联”。 透明部署&#xff08;串联&#xff09; 也称为透明模式或桥接模式&#xff0c;是一种安全设备的部署方式。在这种模式下&#xff0c;安全设备被串联…...

编程日记 2025/6/3 14:03:19

C++实现设计模式---原型模式 (Prototype)

原型模式 (Prototype) 原型模式 是一种创建型设计模式&#xff0c;它通过复制现有对象来创建新对象&#xff0c;而不是通过实例化。 意图 使用原型实例指定要创建的对象类型&#xff0c;并通过复制该原型来生成新对象。提供一种高效创建对象的方式&#xff0c;尤其是当对象的…...

编程日记 2025/6/3 14:01:38

Canvas简历编辑器-选中绘制与拖拽多选交互方案

Canvas简历编辑器-选中绘制与拖拽多选交互方案 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM&#xff0c;并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上&#xff0c;关注于实现选中绘制与拖拽多选交…...

编程日记 2025/6/3 14:02:47

kotlin的dagger hilt依赖注入

依赖注入&#xff08;dependency injection, di&#xff09;是设计模式的一种&#xff0c;它的实际作用是给对象赋予实例变量。 基础认识 class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceSta…...

编程日记 2025/6/3 14:01:54

Flink类加载机制详解

1. 总览 在运行Flink应用时，它会加载各种类，另外我们用户代码也会引入依赖，由于他们依赖版本以及加载顺序等不同，就可能会导致冲突，所以很要必要了解Flink是如何加载类的。 根据加载的来源的不同，我们可以将类分为三种： Java Classpath：Java类路径下，这是Java通用的…...

编程日记 2025/6/3 15:51:02

在VSCode中设置bash命令行内容简写

在VSCode中设置bash命令行内容简写 1、打开shell配置文件2、在配置文件的末尾&#xff0c;添加以下行来创建别名3、重新加载配置文件以使更改生效4、在命令行使用缩写执行命令 比如&#xff0c;在VSCode的bash中输入 gc daily&#xff0c;而实际执行 git checkout daily. 1、…...

编程日记 2025/6/3 15:53:11

特制一个自己的UI库，只用CSS、图标、emoji图 第二版

图&#xff1a; 代码&#xff1a; index.html <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>M…...

编程日记 2025/6/3 15:52:22

51_Lua面向对象编程

面向对象编程（Object Oriented Programming，OOP）是一种非常流行的计算机编程架构。像C++、Java、Objective-C、Smalltalk、C#、Ruby等编程语言都支持面向对象编程。 1.面向对象编程特性 面向对象编程是一种编程范式，它使用“对象”来设计软件。对象是数据和行为的封装单元…...

编程日记 2025/6/3 15:52:54

Kafka——两种集群搭建详解 k8s

1、简介 Kafka是一个能够支持高并发以及流式消息处理的消息中间件&#xff0c;并且Kafka天生就是支持集群的&#xff0c;今天就主要来介绍一下如何搭建Kafka集群。 Kafka目前支持使用Zookeeper模式搭建集群以及KRaft模式&#xff08;即无Zookeeper&#xff09;模式这两种模式搭…...

编程日记 2025/6/3 15:51:18

OPT: Open Pre-trained Transformer语言模型

摘要 大规模语言模型通常需要数十万计算日的训练时间&#xff0c;展现了在零样本和小样本学习中的显著能力。鉴于其计算成本之高&#xff0c;这些模型在没有大量资本投入的情况下难以复现。对于那些通过API提供的少数模型&#xff0c;研究者无法获取完整的模型权重&#xff0c…...

编程日记 2025/6/3 11:57:09

开源模型应用落地-LangChain高阶-记忆组件-RedisChatMessageHistory正确使用（八）

一、前言 LangChain 的记忆组件发挥着至关重要的作用，其旨在协助大语言模型（LLM）有效地留存历史对话信息。通过这一功能，使得大语言模型在对话过程中能够更出色地维持上下文的连贯性和一致性，进而能够像人类的记忆运作方式那样，进行更为自然、流畅且智能化的交互。 它仿佛…...

编程日记 2025/6/3 15:52:38

http和https有哪些不同

http和https有哪些不同 1.数据传输的安全性&#xff1a;http非加密&#xff0c;https加密 2.端口号&#xff1a;http默认80端口&#xff0c;https默认443端口 3.性能&#xff1a;http基于tcp三次握手建立连接&#xff0c;https在tcp三次握手后还有TLS协议的四次握手确认加密…...

编程日记 2025/6/3 10:12:54

UML系列之Rational Rose笔记七：状态图

一、新建状态图 依旧是新建statechart diagram&#xff1b; 二、工作台介绍 接着就是一个状态的开始&#xff1a;开始黑点依旧可以从左边进行拖动放置&#xff1a; 这就是状态的开始&#xff0c;和活动图泳道图是一样的&#xff1b;只能有一个开始&#xff0c;但是可以有多个…...

编程日记 2025/6/3 15:52:06

一个使用 Golang 编写的新一代网络爬虫框架，支持JS动态内容爬取

大家好&#xff0c;今天给大家分享一个由ProjectDiscovery组织开发的开源“下一代爬虫框架”Katana&#xff0c;旨在提供高效、灵活且功能丰富的网络爬取体验&#xff0c;适用于各种自动化管道和数据收集任务。 项目介绍 Katana 是 ProjectDiscovery 精心打造的命令行界面&…...

编程日记 2025/6/4 8:43:56

mycat介绍与操作步骤

文章目录 1.分库分表2.mycat 入门2.1 概述2.2 案例&#xff1a;水平分表1&#xff09;准备工作2&#xff09;配置3&#xff09;启动并测试 3.mycat 配置详解3.1 schema.xml3.2 rule.xml3.3 server.xml 4.mycat 分片&#xff1a;垂直拆分1&#xff09;准备工作2&#xff09;配置…...

编程日记 2025/6/2 13:37:05

【Go】：图片上添加水印的全面指南——从基础到高级特性

前言 在数字内容日益重要的今天&#xff0c;保护版权和标识来源变得关键。为图片添加水印有助于声明所有权、提升品牌认知度&#xff0c;并防止未经授权的使用。本文将介绍如何用Go语言实现图片水印&#xff0c;包括静态图片和带旋转、倾斜效果的文字水印&#xff0c;帮助您有…...

编程日记 2025/5/31 16:21:32

R语言的语法糖

R语言的语法糖 引言 在编程语言中&#xff0c;所谓的“语法糖”是指那些使得程序员能够以更简洁、直观的方式书写代码的语法形式。R语言作为一种用于统计分析和数据可视化的编程语言&#xff0c;具有丰富的功能和灵活的语法。本文将深入探讨R语言中的语法糖&#xff0c;帮助读…...

编程日记 2025/5/23 12:17:04

乙游的尽头是虚拟偶像吗？

眼花了&#xff0c;竟然看到二次元乙游男主角走红毯了。 12月20日&#xff0c;某国际知名奢侈品品牌宣布&#xff0c;《恋与深空》四位男主将受邀出席品牌在上海举办的TF戏瘾之夜活动&#xff0c;并公开了四位男主的红毯照片。 没有真人实体的乙游男主走红毯&#xff1f;这是…...

编程日记 2025/5/31 15:52:42

【源码+文档+调试讲解】农产品研究报告管理系统

摘 要 农产品研究报告管理系统是一个旨在收集、整理、存储和分析农产品相关研究数据的综合性平台。农产品研究报告管理系统通常包含一个强大的数据库&#xff0c;它能够处理大量的研究数据&#xff0c;并对这些数据进行有效的管理和备份。农产品研究报告管理系统是现代农业科学…...

编程日记 2025/6/3 3:20:22

SQL UNION 操作符

SQL UNION 操作符 SQL UNION 操作符用于合并两个或多个 SELECT 语句的结果集。它将多个结果集组合成一个单独的结果集&#xff0c;并去除重复的行。为了使用 UNION&#xff0c;每个 SELECT 语句必须具有相同的列数&#xff0c;并且对应列的数据类型必须兼容。 语法 SELECT c…...

编程日记 2025/6/4 5:43:12

springboot vue uniapp 仿小红书 1:1 还原 （含源码演示）

线上预览: 移动端 http://8.146.211.120:8081/ 管理端 http://8.146.211.120:8088/ 小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者 此项目将详细介绍如何使用Vue.js和Spring Boot 集合uniapp 开发一个仿小红书应用&#xff0c;凭借uniapp 可以在h5 小程序 app…...

编程日记 2025/6/4 1:50:17

扩散模型学习

扩散模型学习 DDPM&#xff08;参考1&#xff09; DDIM&#xff08;参考1&#xff0c;参考2&#xff09;...

编程日记 2025/5/14 8:45:10

【面试】MySQL 最左匹配原则

MySQL的最左匹配原则是在使用联合索引时非常重要的概念&#xff0c;理解并合理运用该原则能显著提升查询性能。以下从多个方面详细介绍&#xff1a; 1. 联合索引结构基础 联合索引是对多个列创建的索引。在MySQL中&#xff0c;联合索引以多列值的组合形式&#xff0c;按照创建…...

编程日记 2025/5/30 7:19:46

Mac 删除ABC 输入法

参考链接&#xff1a;百度安全验证 Mac下删除系统自带输入法ABC&#xff0c;正解&#xff01;_mac删除abc输入法-CSDN博客 ABC 输入法和搜狗输入法等 英文有冲突~~ 切换后还会在英文状态&#xff0c;可以删除 &#xff1b;可能会对DNS 输入有影响&#xff0c;但是可以通过复…...

编程日记 2025/6/2 21:00:40

Nginx代理同域名前后端分离项目的完整步骤

前后端分离项目&#xff0c;前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue php 项目为例。直接上 server 模块的 nginx 配置。 server{ listen 80; #listen [::]:80 default_server ipv6onlyon; server_name demo.com;#二配置项目域名 index index.ht…...

编程日记 2025/6/2 21:00:24

21、Transformer Masked loss原理精讲及其PyTorch逐行实现

1. Transformer结构图 2. python import torch import torch.nn as nn import torch.nn.functional as Ftorch.set_printoptions(precision3, sci_modeFalse)if __name__ "__main__":run_code 0batch_size 2seq_length 3vocab_size 4logits torch.randn(batch…...

编程日记 2025/6/4 7:29:38

CNN张量输入形状和特征图

CNN张量输入形状和特征图 这个是比较容易理解的张量的解释&#xff0c;比较直观 卷积神经网络 在这个神经网络编程系列中&#xff0c;我们正在逐步构建一个卷积神经网络&#xff08;CNN&#xff09;&#xff0c;所以让我们看看CNN的张量输入。 ​ ​ 在最后两篇文章中&…...

编程日记 2025/6/2 21:01:45

RK3399开发板Linux实时性改造

本次测试基于NanoPC-T4开发板&#xff08;国产化处理器RK3399&#xff09;&#xff0c;4.19.111内核Xenomai实时性改造测试。 Xenomai下载网站&#xff1a;https://xenomai.org/downloads/ NanoPC-T4网站&#xff1a;https://wiki.friendlyarm.com/wiki/index.php/NanoPC-T4/z…...

编程日记 2025/6/2 21:02:17

ASP.NET Core 中的高效后台任务管理

一、引言 在当今快速发展的 Web 开发领域&#xff0c;ASP.NET Core 凭借其卓越的性能、强大的功能和高度的灵活性&#xff0c;已然成为众多开发者构建现代 Web 应用程序的首选框架。它不仅能够高效地处理各种复杂的业务逻辑&#xff0c;还为开发者提供了丰富多样的工具和功能&…...

编程日记 2025/6/2 21:00:56

Spring Boot 2 学习指南与资料分享

Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今竞争激烈的 Java 后端开发领域&#xff0c;Spring Boot 2 凭借其卓越的特性&#xff0c;为开发者们开辟了一条高效、便捷的开发之路。如果你渴望深入学习 Spring Boot 2&#xff0c;以下这份精心…...

编程日记 2025/6/2 21:01:12

知识追踪模型DKT,DLKT详解及代码复现

定义与应用 知识追踪是一种 教育技术领域的重要方法 ，旨在通过分析学生的学习行为和表现，预测其掌握特定知识点的程度。这种方法的核心在于建立能够反映学习者认知状态的动态模型，从而实现对学生学习进度的实时监控和个性化指导。 DKT模型 DKT模型 是最早的知识追踪模型之…...

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

一类特殊积分的计算

一类特殊积分的计算 前言一、第一个引理二、第二个引理三、积分的计算后记 前言 今天讨论的这类积分是十分有趣的&#xff0c;在 Mathematics Stack Exchange 看见后&#xff0c;便打算在此将其中的计算过程完善一下。在本篇文章中&#xff0c;我们重点考虑求解如下积分&#…...

编程日记 2025/6/2 0:18:58

VScode 配置 C语言环境

遇到的问题集合 mingw官方下载网站&#xff08;https://sourceforge.net/projects/mingw-w64/files/&#xff09;更新之后&#xff0c;与网上大多数教程上写的界面不同了。 网上大多数教程让下载这个&#xff1a; 但是现在找不到这个文件。 写hello.c文件时&#xff0c;报错&…...

编程日记 2025/6/2 21:01:29

spring mvc源码学习笔记之十一

pom.xml 内容如下 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/P…...

编程日记 2025/6/3 11:59:41

小结：路由器和交换机的指令对比

路由器和交换机的指令有一定的相似性&#xff0c;但也有明显的区别。以下是两者指令的对比和主要差异&#xff1a; 相似之处 基本操作 两者都支持类似的基本管理命令&#xff0c;比如&#xff1a; 进入系统视图&#xff1a;system-view查看当前配置&#xff1a;display current…...

编程日记 2025/6/3 11:59:25

ffmpeg7.0 aac转pcm

#pragma once #define __STDC_CONSTANT_MACROS #define _CRT_SECURE_NO_WARNINGSextern "C" { #include "libavcodec/avcodec.h" }//缓冲区大小&#xff08;缓存5帧数据&#xff09; #define AUDIO_INBUF_SIZE 40960 /*name depthu8 8s16 …...

编程日记 2025/6/3 12:01:50

C#读取本地网络配置信息全攻略

一、引言 在当今数字化时代&#xff0c;网络已深度融入我们生活与工作的方方面面。对于软件开发而言&#xff0c;掌握本地计算机的网络配置信息显得尤为关键。想象一下&#xff0c;你正在开发一款网络诊断工具&#xff0c;需要精准定位网络连接问题&#xff0c;此时 IP 地址、…...

编程日记 2025/6/3 12:01:01

解决aerich init -t xx 报错ModuleNotFoundError: No module named ‘tomli_w‘

今天在学习fastapi的时候&#xff0c;发现一款数据库迁移工具&#xff0c;通过这个工具可以根据模型类来对数据库做出改变。 随跟着学: 在执行 aerich init -t settings.TORTOISE_ORM的时候&#xff0c; 彼其娘之。。 报了一些错误&#xff1a; Traceback (most recent ca…...

编程日记 2025/6/3 12:01:34

python检测gitlab中某个标签在一个月内添加和移除了多少次

可以通过 Python 脚本和 GitLab API 检测一个标签在一个月内被添加和移除的次数。以下是实现的步骤和示例代码&#xff1a; 步骤 获取 GitLab API 访问令牌&#xff1a;在 GitLab 中生成一个 Personal Access Token。设置时间范围&#xff1a;确定一个月的时间范围。调用 Git…...

编程日记 2025/6/3 11:59:58

学习模板之一

学习目标&#xff1a; 提示&#xff1a;这里可以添加学习目标 例如&#xff1a; 一周掌握 Java 入门知识 学习内容&#xff1a; 提示&#xff1a;这里可以添加要学的内容 例如&#xff1a; 搭建 Java 开发环境掌握 Java 基本语法掌握条件语句掌握循环语句 学习时间&#x…...

编程日记 2025/6/3 12:00:29

2025-微服务—SpringCloud-1~3

2025-微服务—SpringCloud 第一章、从Boot和Cloud版本选型开始说起1、Springboot版本2、Springcloud版本3、Springcloud Alibaba4、本次讲解定稿版 第二章 关于Cloud各种组件的停更/升级/替换1、微服务介绍2、SpringCloud是什么&#xff1f;能干吗&#xff1f;产生背景&#xf…...

编程日记 2025/6/3 12:01:18

centos7.6 安装nginx 1.21.3与配置ssl

1 安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel2 下载Nginx wget http://nginx.org/download/nginx-1.21.3.tar.gz3 安装目录 mkdir -p /data/apps/nginx4 安装 4.1 创建用户 创建用户nginx使用的nginx用户。 #添加www组 # groupa…...

编程日记 2025/6/3 12:00:14

PL/SQL语言的数据库交互

PL/SQL语言的数据库交互 引言 在当今的信息化时代&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;在各行各业中扮演着至关重要的角色。为了高效地与数据库进行交互&#xff0c;许多程序员、数据库管理员和系统分析师选择使用PL/SQL&#xff08;Procedural Language/…...

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

ARP欺骗

文章目录 ARP协议ARP欺骗原理断网攻击ARP欺骗(不断网) ARP协议 在局域网中&#xff0c;网络传输的是帧&#xff0c;帧里面有目标主机的MAC地址。arp协议负责将IP地址解析成对应的MAC地址 ARP欺骗原理 即通过伪造IP地址和MAC地址实现ARP欺骗&#xff0c;能够在网络中产生大量…...

编程日记 2025/6/4 16:00:30

Genymotion配套VirtualBox所在地址

在 Genymotion打开虚拟机前需要先打开VirtualBox中的虚拟机 C:\Program Files\Oracle\VirtualBox\VirtualBox.exe 再开启genymotion中的虚拟机开关...

编程日记 2025/5/19 17:21:41

TPS61022 PFM的机制以及TPS61xxx转换器的PFM与PWM之间的负载阈值

引言 TI 的大多数 TPS61xxx 低压升压转换器都配备了 PSM&#xff08;省电模式&#xff09;&#xff0c;以帮助提高轻负载效率。但是&#xff0c;当它处于重负载状态时&#xff0c;输出纹波通常会高于 PWM。此外&#xff0c;PSM 和 PWM 之间的负载电流阈值不会直观地写入数据表中…...

编程日记 2025/6/3 6:46:52