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（遮罩图像）属性，配合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。立即学习“前端免费学习笔记（深入）”；
.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路径的
d属性，从而改变波浪的形状。例如，可以根据用户的交互或者时间的变化，调整贝塞尔曲线的控制点，实现波浪的动画效果。 另一种方法是使用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;
}
}mask-image
与其他CSS属性的结合应用
mask-image可以与
background-image、
box-shadow等属性结合使用，创造出更丰富的视觉效果。 例如，可以使用
background-image填充波浪的内部颜色，使用
box-shadow增加波浪的立体感。 还可以使用
clip-path属性，裁剪波浪的形状，使其更加精细。 此外，结合CSS变量，可以方便地控制波浪的颜色、大小和动画速度，提高代码的可维护性。
