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

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

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

解决方案

1. 使用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轴方向重复，形成连续的波浪。

2. 使用渐变作为遮罩： 可以创建线性或径向渐变，然后将其作为

   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变量，可以方便地控制波浪的颜色、大小和动画速度，提高代码的可维护性。