如何创建带边框的 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中文网其他相关文章！