CSS中创建波浪形状可能是一项挑战。我们常常尝试使用border-radius属性和大量近似值来模拟波浪效果，但这在处理波浪图案时会变得更加复杂。
虽然SVG是创建波浪形状的更有效方法，但CSS也能实现不错的效果，且代码不必过于复杂。更棒的是，我提供了一个在线生成器来简化这个过程！
使用生成器，您可以看到生成的CSS代码仅包含两个渐变和一个CSS mask属性——仅此而已，就能创建各种波浪形状和图案。此外，我们还可以轻松控制波浪的大小和曲率。
一些值可能看起来像“魔法数字”，但它们背后实际上有逻辑依据。我们将剖析代码，揭开创建波浪的所有秘密。
本文是对之前一篇关于创建各种锯齿形、范围限定形、扇贝形和波浪形边框的文章的后续。我强烈建议您阅读那篇文章，因为它使用了此处介绍的相同技术，但更详细。
严格来说，并没有一个神奇的公式来创建波浪形状。任何具有上下曲线的形状都可以称为波浪，因此我们不会将自己局限于复杂的数学计算。相反，我们将使用几何基础来重现波浪。
让我们从一个使用两个圆形形状的简单示例开始：
我们有两个半径相同的圆形彼此相邻。您看到那条红线了吗？它覆盖了第一个圆形的上半部分和第二个圆形的下半部分。现在想象一下，您取那条线并重复它。
我们已经看到了波浪。现在让我们填充底部（或顶部）部分以获得以下结果：
瞧！我们得到了一个波浪形状，并且可以使用一个变量来控制圆形的半径。这是我们可以创建的最简单的波浪之一，也是我在之前的文章中展示的波浪。
让我们通过取第一个图例并稍微移动圆形来增加一些复杂性：
我们仍然有两个半径相同的圆形，但它们不再水平对齐。在这种情况下，红线不再覆盖每个圆形的一半面积，而是较小的面积。该区域受虚线红线限制。该线穿过两个圆形相遇的点。
现在取那条线并重复它，您将得到另一个波浪，一个更平滑的波浪。
我想你明白了。通过控制圆形的位置和大小，我们可以创建任何我们想要的波浪。我们甚至可以为它们创建变量，我将分别称之为P和S。
您可能已经注意到，在在线生成器中，我们使用两个输入来控制波浪。它们映射到上述变量。S是“波浪的大小”，P是“波浪的曲率”。
我将P定义为P = m*S，其中m是您在更新波浪曲率时调整的变量。这允许我们始终保持相同的曲率，即使我们更新S。
m可以是0到2之间的任何值。0将给出我们第一个特殊情况，其中两个圆形水平对齐。2是一种最大值。我们可以更大，但在进行了一些测试后，我发现任何大于2的值都会产生不良的扁平形状。
让我们不要忘记我们圆形的半径！这也可以使用S和P来定义，如下所示：
<code>R = sqrt(P² + S²)/2 R = sqrt(m²*S² + S²)/2 R = S*sqrt(m² + 1)/2</code>
当m等于0（即P等于0）时，我们将有R = S/2。
我们拥有将所有这些转换为CSS中的渐变所需的一切！
我们的波浪使用圆形，当谈到圆形时，我们谈论的是径向渐变。由于两个圆形定义了我们的波浪，因此我们将在逻辑上使用两个径向渐变。
我们将从P等于0的特殊情况开始。这是第一个渐变的图示：
此渐变创建第一个曲率，同时填充整个底部区域——可以说是波浪的“水”。
<code>.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>--size变量定义了径向渐变的半径和大小。如果我们将其与S变量进行比较，则它等于S/2。
现在让我们添加第二个渐变：
第二个渐变只是一个圆形来完成我们的波浪：
<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>
如果您查看之前的文章，您会发现我只是在重复我在那里已经做的事情。
我阅读了两篇文章，但渐变配置并不相同。
这是因为我们可以使用不同的渐变配置来达到相同的结果。如果您比较这两种配置，您会注意到对齐方式略有不同，但技巧是相同的。如果您不熟悉渐变，这可能会令人困惑，但不用担心。通过一些练习，您会习惯它们，并且您会发现不同的语法可以产生相同的结果。
这是我们第一个波浪的完整代码：
<code>.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>现在让我们获取此代码并对其进行调整，以便我们引入一个变量，使其可以完全重复用于创建任何我们想要的波浪。正如我们在上一节中看到的，主要技巧是移动圆形，使它们不再对齐，因此让我们更新每个圆形的位置。我们将第一个向上移动，第二个向下移动。
我们的代码将如下所示：
<code>.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>我引入了一个新的--p变量，用于定义每个圆形的中心位置。第一个渐变使用50% calc(-1*var(--p))，因此其中心向上移动，而第二个渐变使用calc(var(--size) var(--p))将其向下移动。
演示胜过千言万语：
圆形既不对齐也不相互接触。我们在不改变半径的情况下将它们隔得很远，因此我们失去了波浪。但是我们可以通过使用前面使用的相同数学方法来计算新的半径来修复这些问题。记住R = sqrt(P² S²)/2。在我们的例子中，--size等于S/2；--p也是如此，因为它也等于P/2，因为我们正在移动两个圆形。因此，它们中心点之间的距离是--p的两倍：
<code>R = sqrt(P² + S²)/2 R = sqrt(m²*S² + S²)/2 R = S*sqrt(m² + 1)/2</code>
这给了我们55.9px的结果。
我们的波浪回来了！让我们将该等式插入我们的CSS：
<code>.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>上面的CSS看起来有效，但它不会工作，因为我们不能将两个长度相乘，所以我们必须引入m变量来控制曲率，如上一节所述。
<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>
这非常酷：只需要两个渐变就可以得到一个很酷的波浪，您可以使用mask属性将其应用于任何元素。无需反复试验——您只需要更新两个变量就可以了！
如果我们想要波浪朝另一个方向前进，我们填充“天空”而不是“水”怎么办？信不信由你，我们只需要更新两个值：
<code>.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>我所做的只是添加一个等于100%的偏移量，如上所示。结果如下：
我们可以考虑使用关键字值更友好的语法，使其更容易：
<code>.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>我们使用left和bottom关键字来指定边和偏移量。默认情况下，浏览器默认为left和top——这就是为什么我们使用100%将元素移动到底部的原因。实际上，我们将其从顶部移动了100%，所以它实际上与说底部相同。比数学更容易阅读！
使用此更新的语法，我们只需将bottom替换为top——反之亦然——即可更改波浪的方向。
如果您想要同时获得顶部和底部的波浪，我们将所有渐变组合在一个声明中：
<code>R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))</code>
如果您检查代码，您会看到除了组合所有渐变之外，我还将其高度从100%减少到51%，以便它们都覆盖元素的一半。是的，51%。我们需要额外的一点点百分比来进行小的重叠以避免出现间隙。
左侧和右侧呢？
这是您的作业！利用我们在顶部和底部所做的工作，尝试更新值以获得右侧和左侧的值。别担心，这很容易，您唯一需要做的就是交换值。
如果您遇到问题，您可以随时使用在线生成器来检查代码并可视化结果。
...(剩余内容与原文类似，只是对语言和表达方式进行了调整，保留了图片和代码块)
以上是如何在CSS中创建波浪形的形状和图案的详细内容。更多信息请关注PHP中文网其他相关文章！
