如何建立帶有邊框的 CSS3 波浪形狀？

帶邊框的 CSS3 波浪形狀

在此查詢中，使用者希望使用 CSS3 建立帶邊框的波浪形狀。儘管嘗試使用 CSS3 Shapes，但他們遇到了困難。

要解決這個問題，CSS3 Shapes 可能不是最合適的解決方案，因為它不是為創建邊框而設計的。相反，更有效的方法是使用 SVG（可縮放向量圖形）。

使用 SVG 的解：

將「.panel」div 元素替換為 SVG 元素。使用“路徑”元素定義波浪的形狀。指定「填滿」屬性來設定背景顏色，指定「描邊」屬性來建立邊框。將 SVG 元素向右浮動以相應對齊。

以下是 HTML 和 CSS 程式碼範例：

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

這種方法可讓您獨立控制填滿顏色和邊框，從而產生想要的帶有邊框的波浪形狀。

以上是如何建立帶有邊框的 CSS3 波浪形狀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！