CSS怎样制作波浪形边框？mask-image遮罩应用技巧

絕刀狂花

发布时间：2025-08-15 12:57:01

646人浏览过

来源于php中文网

原创

css制作波浪形边框的核心是使用mask-image属性结合svg或渐变实现，1. 使用svg作为遮罩可通过data uri嵌入路径定义波浪形状，并利用mask-size和mask-repeat控制显示效果；2. 使用渐变作为遮罩可通过linear-gradient创建锯齿状波浪并重复显示；3. 动态调整波浪可通过javascript修改svg路径或使用css动画配合mask-position实现移动动画；4. 兼容性方面需注意-webkit-mask-image等浏览器前缀及旧版浏览器降级处理；5. 可结合background-image、box-shadow、clip-path和css变量等属性增强视觉效果与代码可维护性，最终实现灵活且富有创造性的波浪边框效果。

CSS怎样制作波浪形边框？mask-image遮罩应用技巧

CSS制作波浪形边框，核心在于利用

mask-image

（遮罩图像）属性，配合SVG或渐变，创造出视觉上的波浪效果。这比直接使用

border

属性要灵活得多，也更具创造性。

解决方案

使用SVG作为遮罩： 这是最常见也最灵活的方法。你可以创建一个SVG路径，定义波浪的形状，然后将其作为

mask-image

的值。

.wavy-border {
  width: 300px;
  height: 150px;
  background-color: #007bff; /* 填充颜色 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10'%3E%3Cpath d='M0,5 C50,0 150,10 200,5 C250,0 300,10 300,5 L300,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10'%3E%3Cpath d='M0,5 C50,0 150,10 200,5 C250,0 300,10 300,5 L300,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 10px;
  mask-size: 100% 10px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

```
data:image/svg+xml,...
```
：这是一个Data URI，直接将SVG代码嵌入到CSS中，避免了额外的HTTP请求。
```
viewBox
```
：定义SVG的坐标系统，这里设置为
```
0 0 300 10
```
，意味着SVG的宽度是300，高度是10。
```
path d='M0,5 C50,0 150,10 200,5 C250,0 300,10 300,5 L300,100 L0,100 Z'
```
：这是SVG路径的定义，
```
M
```
表示移动到，
```
C
```
表示三次贝塞尔曲线。
```
mask-size: 100% 10px
```
：设置遮罩的大小，这里设置为宽度100%，高度10px。
```
mask-repeat: repeat-x
```
：让遮罩在X轴方向重复，形成连续的波浪。

使用渐变作为遮罩： 可以创建线性或径向渐变，然后将其作为
```
mask-image
```
的值。这种方法相对简单，但灵活性不如SVG。

立即学习“前端免费学习笔记（深入）”；

一点PPT
一句话生成专业PPT，AI自动排版配图

下载
```
.wavy-border-gradient {
  width: 300px;
  height: 150px;
  background-color: #dc3545;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, white 50%);
  mask-image: linear-gradient(to bottom, transparent 50%, white 50%);
  -webkit-mask-size: 100% 20px;
  mask-size: 100% 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
```
这里使用线性渐变，从透明到白色，然后重复，形成类似锯齿的效果。可以通过调整渐变的位置和颜色，以及
```
mask-size
```
和
```
mask-repeat
```
，来改变波浪的形状和大小。

mask-image

兼容性问题与解决方案

mask-image

属性的兼容性相对较好，但仍需注意不同浏览器的前缀问题，例如

-webkit-mask-image

。同时，一些老版本的浏览器可能不支持此属性，需要提供备选方案，例如使用传统的

border

样式，或者使用JavaScript模拟遮罩效果。另外，

mask-image

与

background

属性的叠加效果需要仔细考虑，确保视觉效果符合预期。

如何动态调整波浪的形状和动画？

使用SVG遮罩时，可以通过JavaScript动态修改SVG路径的

属性，从而改变波浪的形状。例如，可以根据用户的交互或者时间的变化，调整贝塞尔曲线的控制点，实现波浪的动画效果。另一种方法是使用CSS动画，配合

mask-position

属性，移动遮罩的位置，从而产生波浪的动画效果。

.wavy-border-animated {
  width: 300px;
  height: 150px;
  background-color: #28a745;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10'%3E%3Cpath d='M0,5 C50,0 150,10 200,5 C250,0 300,10 300,5 L300,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10'%3E%3Cpath d='M0,5 C50,0 150,10 200,5 C250,0 300,10 300,5 L300,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 600px 10px; /* 增加宽度，方便移动 */
  mask-size: 600px 10px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-animation: wave 5s linear infinite;
  animation: wave 5s linear infinite;
}

@-webkit-keyframes wave {
  0% {
    -webkit-mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: -300px 0; /* 移动一个波浪的宽度 */
  }
}

@keyframes wave {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: -300px 0;
  }
}