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

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

news 2025/6/22 0:17:39

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/1/14 13:30:43

国内主流的Spring微服务方案指南

构建一个完整的 Spring 微服务方案涉及多个关键组件的集成与配置&#xff0c;包括服务注册与发现、配置管理、API 网关、负载均衡、服务调用、熔断与限流、消息中间件、分布式追踪、服务网格、容器编排以及数据库与缓存等。以下将结合前述内容&#xff0c;详细介绍一个完整的中…...

编程日记 2025/1/14 13:29:41

docker更换镜像源脚本

Ubuntu / Debian 系统下的脚本 sudo curl -fsSL http://luyuanbo79.iepose.cn/wenjian/docker%20jingxiangyuan/Ubuntu-Debian.sh | sh CentOS / RHEL 系统下的脚本 sudo curl -fsSL\n\nhttp://luyuanbo79.iepose.cn/wenjian/docker%20jingxiangyuan/CentOS%20%20RHEL.sh | …...

编程日记 2025/1/14 13:28:38

Java Web开发进阶——错误处理与日志管理

错误处理和日志管理是任何生产环境中不可或缺的一部分。在 Spring Boot 中&#xff0c;合理的错误处理机制不仅能够提升用户体验&#xff0c;还能帮助开发者快速定位问题&#xff1b;而有效的日志管理能够帮助团队监控应用运行状态&#xff0c;及时发现和解决问题。 1. 常见错误…...

编程日记 2025/1/14 13:11:15

计算机网络 笔记 网络层1

网络层功能概述 主要的任务是把分组从源端传输到目的端&#xff0c;为分组交换网上的不同主句提供通信服务&#xff0c;网络层的传输单位是数据报。 主要的功能&#xff1b; 1&#xff0c;路由选择&#xff1a;路由选择指网络层根据特定算法&#xff0c;为数据包从源节点到目…...

编程日记 2025/1/14 13:10:13

【论文笔记】多个大规模数据集上的SOTA绝对位姿回归方法：Reloc3r

abstract 视觉定位旨在确定查询图像相对于姿势图像数据库的相机姿势。 近年来&#xff0c;直接回归相机姿势的深度神经网络由于其快速推理能力而受到欢迎。 然而&#xff0c;现有方法很难很好地推广到新场景或提供准确的相机姿态估计。 为了解决这些问题&#xff0c;我们提出了…...

编程日记 2025/1/14 13:09:12

springMVC---常用注解

目录 一、创建项目 1.依赖 2.web.xml 3.spring-mvc.xml 二、RequestParam注解 1.作用 2.属性 3.代码 DeptController类 启动tomcat 三、RequestBody注解 1.作用 2.属性 3.代码 (1&#xff09;DeptController类 (2&#xff09;index.jsp (3)启动tomcat 四、P…...

编程日记 2025/1/14 13:03:05

青龙面板脚本开发指南：高效自动化任务的实现

青龙面板脚本开发指南&#xff1a;高效自动化任务的实现 青龙面板&#xff08;Qinglong Panel&#xff09;是一款强大的任务管理平台&#xff0c;支持多种语言的脚本开发和执行。通过在青龙面板中编写和管理脚本&#xff0c;用户可以轻松实现自动化任务&#xff0c;提高工作效…...

编程日记 2025/1/14 13:00:01

深入详解DICOM医学影像定位线相关知识：理解定位线的概念、定位线的作用以及定位线显示和计算原理

DICOM医学影像中的定位线（Localization Line） 在医学影像学中，DICOM是用于存储和交换医学影像的标准格式。定位线（Localization Line）在医学影像的显示和分析中起着重要作用，它帮助医生和医学专业人员在影像中精确地标定重要的解剖结构、区域或特征，辅助进行定位、治疗计…...

编程日记 2025/1/14 12:57:57

网络应用技术 实验七：实现无线局域网

一、实验简介 在 eNSP 中构建无线局域网&#xff0c;并实现全网移动终端互相通信。 二、实验目的 1 、理解无线局域网的工作原理&#xff1b; 2 、熟悉无线局域网的规划与构建过程&#xff1b; 3 、掌握无线局域网的配置方法&#xff1b; 三、实验学时 2 学时 四、实…...

编程日记 2025/1/14 12:53:52

kubeneters-循序渐进Cilium网络（一）

文章目录 概要传统网络不同的网络&#xff08;或子网&#xff09;之间通信Kubernetes 中的网络在同一栋大楼内的公寓之间通信跨大楼的通信总结 概要 本文通过“封包追踪”方法&#xff0c;深入解析 Kubernetes 网络通信过程。基于 eBPF 的 Cilium 工具&#xff0c;直观展示了数…...

编程日记 2025/1/14 12:46:43

elasticsearch中IK分词器

1、什么是IK分词器 ElasticSearch 几种常用分词器如下&#xff1a; 分词器分词方式StandardAnalyzer单字分词CJKAnalyzer二分法IKAnalyzer词库分词 分词∶即把一段中文或者别的划分成一个个的关键字&#xff0c;我们在搜索时候会把自己的信息进行分词&#xff0c;会把数据库…...

编程日记 2025/1/14 12:44:39

Qt之http客户端类

一、HTTP客户端类功能&#xff1a; 1、POST请求发送&#xff1a; 支持发送JSON格式的数据自动处理请求头设置提供上传进度监控、 2、GET请求发送&#xff1a; 简单的GET请求实现支持下载进度监控 3、状态监控&#xff1a; 通过信号槽机制监控上传/下载进度错误处理和状态回调 /…...

编程日记 2025/1/14 12:43:38

18.C语言文件操作详解：指针、打开、读取与写入

目录 1.文件指针2.fopen3.标准流4.fclose5.EOF6.freopen()7.fgetc与getc8. fputc与putc9.fprintf10.fscanf11.fgets12.fputs13.fwrite14.fread15.feof16.fseek17.ftell18.rewind19.fgetpos()与fsetpos20.ferror与clearerr21.remove22.rename 1.文件指针 本篇原文为&#xff1a…...

编程日记 2025/1/14 12:42:36

深入浅出 OpenResty

1. 引言 1.1. OpenResty简介 OpenResty 是一个基于 Nginx 的高性能 Web 平台&#xff0c;它集成了大量模块&#xff0c;并原生支持 Lua 脚本。这使得开发者能够以非常灵活的方式实现复杂的逻辑&#xff0c;而无需重新编译或扩展 Nginx 核心。OpenResty 的主要特点包括&#x…...

编程日记 2025/1/14 12:30:24

在 .NET 9 中使用 Scalar 替代 Swagger

前言 在.NET 9发布以后ASP.NET Core官方团队发布公告已经将Swashbuckle.AspNetCore&#xff08;一个为ASP.NET Core API提供Swagger工具的项目&#xff09;从ASP.NET Core Web API模板中移除&#xff0c;这意味着以后我们创建Web API项目的时候不会再自动生成Swagger API文档了…...

编程日记 2025/1/14 12:28:22

ue5 蒙太奇，即上半身动画和下半身组合在一起，并使用。学习b站库得科技

本文核心 正常跑步动画端枪动画跑起来也端枪 正常跑步动画 端枪动画的上半身 跑起来也端枪 三步走&#xff1a; 第一步制作动画蒙太奇和插槽 第二步动画蓝图选择使用上半身动画还是全身动画&#xff0c;将上半身端枪和下半身走路结合 第三步使用动画蒙太奇 1.开始把&a…...

编程日记 2025/1/14 12:21:15

多活架构的实现原理与应用场景解析

一、多活架构为何如此重要？ 企业的业务运营与各类线上服务紧密相连，从日常的购物消费、社交娱乐，到金融交易、在线教育等关键领域，无一不依赖于稳定可靠的信息系统。多活架构的重要性愈发凸显，它宛如一位忠诚的卫士，为业务的平稳运行保驾护航。 回想那些因系统故障引发的…...

编程日记 2025/1/14 12:19:04

一 rk3568 Android 11固件开发环境搭建 （docker)

一 目标 搭建 rk3568 android 系统内核 及固件开发编译调试环境, 支持开发环境导出分享 基于荣品 rk3568 核心板 系统环境： ubuntu22.04 /ubuntu20.04 64位桌面版 编译环境: docker + ubuntu20.04 , 独立的容器隔离环境，不受系统库版本冲突等影响，无性能损耗， 可…...

编程日记 2025/1/14 12:18:01

小结：华为路由器常用的操作指令

以下是华为路由器常用的操作指令&#xff08;适用于华为企业级路由器&#xff0c;基于VRP操作系统&#xff09;&#xff1a; 1. 基本操作命令 进入用户视图模式 <Huawei> &#xff08;默认进入用户视图&#xff09; 进入系统视图模式 <Huawei> system-view [Huawe…...

编程日记 2025/1/14 12:13:55

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/6/21 8:38:45

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/6/21 17:02:30

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/6/21 15:24:11

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/6/21 4:11:30

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/6/20 15:14:55

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/15 14:45:38

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/6/21 5:45:53

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/6/21 22:56:06

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/6/19 12:33:29