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

devtools/2025/1/16 13:14:16/

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

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

线性渐变

线性渐变 - 从上到下

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

HTML:

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

CSS:

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>css">
.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:

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>css">
.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:

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>css">
.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:

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>css">
.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:

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>css">
.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:

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>css">
.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文件并打开它，你应该能够看到从左到右的蓝色至透明的线性渐变效果。

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

css">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:

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>css">
.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:

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:

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>css">
.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:

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>css">
.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.ppmy.cn/devtools/150958.html

相关文章

代码随想录算法训练营第三十四天-动态规划-62. 不同路径

代码随想录算法训练营第三十四天-动态规划-62. 不同路径

动规五部曲 dp数组含义&#xff1a;到达到第i行&#xff0c;第j列的所有不同种走法&#xff0c;即有多少条路径可到达递推公式&#xff1a;dp[i][j] dp[i - 1][j] dp[i][j - 1]dp数组初始化&#xff0c;要初始化最上面一行&#xff0c;与最左边一列的值&#xff0c;都为1&…
阅读更多...
女性机器人有市场吗

女性机器人有市场吗

随着AI技术和仿生技术的发展&#xff0c;可以预见&#xff0c;未来的市场上必然出现女性机器人&#xff0c;女性机器人未来会有市场吗&#xff1f;如何定义女性机器人&#xff1f; 1、如果你不想生娃&#xff0c;女性机器人完全可以代替真人。将来的机器人她能干几乎所有的家务…
阅读更多...
WPS计算机二级•表格函数计算

WPS计算机二级•表格函数计算

听说这里是目录哦 函数基础知识 相对绝对混合引用&#x1f32a;️相对引用绝对引用混合引用 常用求和函数 SUM函数&#x1f326;️语法说明 函数快速求 平均数最值⚡平均数最值 实用统计函数 实现高效统计&#x1f300;COUNTCOUNTIF 实用文本函数 高效整理数据&#x1f308;RIG…
阅读更多...
Go语言的数据竞争 (Data Race) 和 竞态条件 (Race Condition)

Go语言的数据竞争 (Data Race) 和 竞态条件 (Race Condition)

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…
阅读更多...
网络技术发展的演变与未来展望

网络技术发展的演变与未来展望

网络技术作为信息社会的重要基石&#xff0c;在过去几十年中经历了快速的发展和巨大的变革。从最初的 ARPANET&#xff0c;到现在广泛使用的互联网&#xff0c;再到未来多国正在积极研发的 6G 网络&#xff0c;人类社会对网络技术的依赖程度不断加深&#xff0c;网络技术也持续…
阅读更多...
MC1.12.2 macOS高清修复OptiFine运行崩溃

MC1.12.2 macOS高清修复OptiFine运行崩溃

最近在玩RLCraft&#xff0c;在windows中运行正常的&#xff0c;移植到macOS中发现如果加载OptiFine模组就会崩溃 报错日志 报错日志如下&#xff0c;其中已经包含了各种版本信息&#xff0c;我就不单独说明了。这里说一下&#xff0c;报错的时候用的是oracle jdk x64的&…
阅读更多...
在IDEA上运行Java项目

在IDEA上运行Java项目

新建一个项目&#xff0c;下面创建模块&#xff0c;然后在src下新建包名&#xff0c;最后见类&#xff08;class&#xff09; 设置主题 settings>apparence 设置字体 Editor> Font 设置注释 Editor>Color Scheme>Language Defaults>Comments 设置自动导包 …
阅读更多...
Flutter 多终端测试 自定义启动画面​​​​​​​ 更换小图标和应用名称

Flutter 多终端测试 自定义启动画面​​​​​​​ 更换小图标和应用名称

多终端测试 flutter devices flutter run -d emulator-5554 flutter run -d emulator-5556 自定义启动画面 之前&#xff1a; 进入assert 3x 生成 1x 2x dart run flutter_native_splash:create dart run flutter_native_splash:remove 现在&#xff08;flutter_nativ…
阅读更多...
最新文章

Copyright @ 2022~2023