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中文網其他相關文章！
