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

news2025/1/15 0:14:27

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），以及自定义起点位置来创造更加独特的视觉效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2276716.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

25/1/13 嵌入式笔记 继续学习Esp32

25/1/13 嵌入式笔记 继续学习Esp32

PWM&#xff08;Pulse Width Modulation&#xff0c;脉宽调制&#xff09; 是一种通过快速切换高低电平来模拟中间电压值的技术。它广泛应用于控制 LED 亮度、电机速度、音频生成等场景。 analogWrite函数:用于在微控制器&#xff08;如 Arduino&#xff09;上生成模拟信号。 …
阅读更多...
【端云一体化】云函数的使用

【端云一体化】云函数的使用

前言 为丰富HarmonyOS对云端开发的支持、实现端云联动&#xff0c;DevEco Studio以Cloud Foundation Kit&#xff08;云开发服务&#xff09;为底座、在传统的“端开发”基础上新增“云开发”能力&#xff0c;开发者在创建工程时选择合适的云开发工程模板&#xff0c;即可在De…
阅读更多...
行业案例：高德服务单元化方案和架构实践

行业案例：高德服务单元化方案和架构实践

目录 为什么要做单元化 高德单元化的特点 高德单元化实践 服务单元化架构 就近接入实现方案 路由表设计 路由计算 服务端数据驱动的单元化场景 总结 系列阅读 为什么要做单元化 单机房资源瓶颈 随着业务体量和服务用户群体的增长，单机房或同城双机房无法支持服…
阅读更多...
基于单片机的语音控制玩具汽车的设计

基于单片机的语音控制玩具汽车的设计

语音控制小汽车选用了两个单片机、一个语音识别芯片、两个无线收发模块、一个电机驱动模块、两个电机、一个音频解码模块。语音控制端选用了一个语音识别芯片&#xff0c;实现了将声音信号转换成数字信号&#xff0c;再将数据传输给单片机的功能。小车端选用了单片机来控制电机…
阅读更多...
解锁“搭子小程序”开发新机遇，助力企业数字化转型

解锁“搭子小程序”开发新机遇，助力企业数字化转型

搭子作为一种新型的社交方式&#xff0c;逐渐进入到了年轻人的生活中&#xff0c;在日常旅游、学习、逛街等&#xff0c;年轻人都可以找到志同道合的“搭子”&#xff0c;提高生活的幸福指数。 随着搭子市场的发展&#xff0c;通过互联网寻找搭子已经成为了年轻人的必备方式。…
阅读更多...
Spring Boot 2 学习全攻略

Spring Boot 2 学习全攻略

Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今快速发展的 Java 后端开发领域&#xff0c;Spring Boot 2 已然成为一股不可忽视的强大力量。它简化了 Spring 应用的初始搭建以及开发过程&#xff0c;让开发者能够更加专注于业务逻辑的实现&am…
阅读更多...
31_搭建Redis分片集群

31_搭建Redis分片集群

Redis的主从复制模式和哨兵模式可以解决高可用、高并发读的问题。但是依然有两个问题没有解决：海量数据存储问题、高并发写的问题。由于数据量过大，单个master复制集难以承担，因此需要对多个复制集进行集群，形成水平扩展每个复制集只负责存储整个数据集的一部分，这就是Red…
阅读更多...
IMX6U Qt 开发环境

IMX6U Qt 开发环境

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、交叉编译 1. 安装通用 ARM 交叉编译工具链 2. 安装 Poky 交叉编译工具链 二、编译出厂源码 1. U-boot 2. 内核和模块 3. 编译出厂 Qt GUI 综合 Demo 前言…
阅读更多...
数据结构与算法之链表: LeetCode 92. 反转链表 II (Ts版)

数据结构与算法之链表: LeetCode 92. 反转链表 II (Ts版)

反转链表 II https://leetcode.cn/problems/reverse-linked-list-ii/description/ 描述 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 示例 1 输入&…
阅读更多...
【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录

【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录

一、import导入css样式 在项目文件中创建一个common文件夹&#xff0c;下面创建一个css文件夹&#xff0c;里面放上style.css文件&#xff0c;编写的是公共样式&#xff0c;我们现在要在App.vue中引入该样式。 在App.vue中引入该样式&#xff0c;这样就会使样式全局生效&#…
阅读更多...
MySQL中的四种表联结

MySQL中的四种表联结

目录 1、联结、关系表 &#xff08;1&#xff09;关系表 &#xff08;2&#xff09;为什么使用联结 2、如何创建联结 &#xff08;1&#xff09;笛卡尔积&#xff08;叉联结&#xff09;--用逗号分隔 &#xff08;2&#xff09;where子句的重要性 &#xff08;3&#xff…
阅读更多...
DVWA靶场CSRF漏洞通关教程及源码审计

DVWA靶场CSRF漏洞通关教程及源码审计

目录标题 CSRFlow源码审计 medium源码审计 high源码审计 impossible源码审计 CSRF low 先修改密码 看到地址栏 复制在另一个网页打开 成功登录 源码审计 没有任何过滤措施&#xff0c;很危险&#xff0c;并且采用了不安全的md5加密 <?phpif( isset( $_GET[ Change ] )…
阅读更多...
JVM之垃圾回收器G1概述的详细解析

JVM之垃圾回收器G1概述的详细解析

G1(并发) G1 特点 G1&#xff08;Garbage-First&#xff09;是一款面向服务端应用的垃圾收集器&#xff0c;应用于新生代和老年代、采用标记-整理算法、软实时、低延迟、可设定目标&#xff08;最大 STW 停顿时间&#xff09;的垃圾回收器&#xff0c;用于代替 CMS&#xff0…
阅读更多...
宝塔面板 申请证书后 仍然提示不安全

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

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

【1】Word：邀请函

目录 题目 文字解析 流程 题目 文字解析 考生文件夹☞Word.docx☞一定要用ms打开&#xff0c;wps打开作答无效☞作答完毕&#xff0c;F12或者手动另存为&#xff08;考生文件夹&#xff1a;路径文件名&#xff09; 注意&#xff1a;一定要检查&#xff0c;很有可能你前面步…
阅读更多...
Docker安装和卸载（centos）

Docker安装和卸载（centos）

Docker安装和卸载 一&#xff0c;已安装Docker&#xff0c;卸载Docker 1.方法一 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine​ 如果出现以下提示就证明没卸载…
阅读更多...
JVM：ZGC详解（染色指针，内存管理，算法流程，分代ZGC）

JVM：ZGC详解（染色指针，内存管理，算法流程，分代ZGC）

1&#xff0c;ZGC&#xff08;JDK21之前&#xff09; ZGC 的核心是一个并发垃圾收集器&#xff0c;所有繁重的工作都在Java 线程继续执行的同时完成。这极大地降低了垃圾收集对应用程序响应时间的影响。 ZGC为了支持太字节&#xff08;TB&#xff09;级内存&#xff0c;设计了基…
阅读更多...
ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统&#xff08;二&#xff09; 2.4 日志提供程序2.4.1 内置日志提供程序2.4.2 源码解析 本篇接着上一篇 ASP.NET Core - 日志记录系统(一) 往下讲&#xff0c;所以目录不是从 1 开始的。 2.4 日志提供程序 2.4.1 内置日志提供程序 ASP.NET Core 包括…
阅读更多...
无源器件-电容

无源器件-电容

电容器件的参数 基本概念由中学大学物理或电路分析内容获得&#xff0c;此处不做过多分析。 电容的产量占全球电子元器件产品的40%以上。 单位&#xff1a;法拉 F&#xff1b;1F10^6uF&#xff1b;电路中常见的104电容就是10*10^4pF100nF0.1uF C为电容&#xff0c;Rp为绝缘电…
阅读更多...
云平台一键部署【Video-Background-Removal】视频换背景，无任何限制，随意换

云平台一键部署【Video-Background-Removal】视频换背景，无任何限制，随意换

Video-Background-Removal 是一款革命性的视频背景替换工具&#xff0c;旨在让用户轻松实现视频背景的快速更换。无论你是专业创作者还是普通用户&#xff0c;这款软件都能让你在几秒钟内改变背景&#xff0c;完全消除限制&#xff0c;随心所欲&#xff0c;随时随地想换就换&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023