在 CSS3 中建立帶有邊框的波浪形狀
在 CSS3 中設計帶邊框的波浪形狀可能具有挑戰性。使用 CSS3 Shapes 實現它們可能不會產生預期的結果。相反，SVG 和 CSS 定位的組合可以達到預期的效果。
使用 SVG 表示波形
而不是使用 div 元素表示波形，可以使用 SVG 元素。 SVG 中的路徑元素可用來定義波浪的形狀。 fill 屬性可以設定為白色，為波形提供純色。
為波形新增邊框
要建立邊框，另一個路徑元素可以加入 SVG 中。此路徑的形狀應與波浪形狀相同，但應稍小。 fill 屬性應設為 none，並且描邊和描邊寬度屬性套用於定義邊框。
定位波形
SVG 元素可以使用CSS定位。 float 屬性可用於將 SVG 浮動到內容的右側。 margin-top 屬性可用來將 SVG 定位在內容稍上方。
最終程式碼
以下程式碼示範了帶有邊框的波浪形狀的實作使用SVG 和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>body {
background: #007FC1;
}
.container {
border-bottom: 4px solid #B4CAD8;
}
.container {
background-color: #fff;
z-index: -1;
}
.container > .text {
padding: 0.5em;
}
.panel {
position: relative;
float: right;
margin-top: -4px;
}此方法使用SVG 建立自訂波形，然後在其上分層邊框在它的頂部使用一個附加的路徑元素。使用 CSS 定位波形即可完成所需的結果。
以上是如何使用 SVG 和 CSS 建立帶有邊框的波浪形狀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
