CSS怎样制作锯齿边框效果？mask-image遮罩应用

CSS的mask-image属性允许我们为元素添加遮罩层，通过遮罩图的透明度控制元素内容的显示范围，这种特性非常适合用来制作各种不规则边框效果，锯齿边框就是其中典型的应用场景。

mask-image遮罩的基本原理

mask-image的作用和Photoshop里的图层蒙版类似，遮罩图中完全透明的区域会让元素对应部分不可见，完全不透明的区域会让元素对应部分正常显示，半透明区域则对应半透明的显示效果。要实现锯齿边框，我们只需要制作一张带有锯齿形状透明区域的遮罩图，应用到目标元素上即可。

锯齿遮罩图的制作方式

锯齿遮罩图可以用SVG直接生成，不需要额外引入外部图片文件，适配性更好。下面是一个生成锯齿遮罩的SVG示例，锯齿高度为10px，宽度为20px，重复平铺：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
  <path d="M0 10 L10 0 L20 10 Z" fill="white"></path>
</svg>

这段SVG会生成一个白色的三角形锯齿形状，背景默认是透明的，后续我们可以通过data URI的方式把这个SVG作为mask-image的值使用。

基础锯齿边框实现示例

我们以一个普通的div元素为例，为它添加上下两边的锯齿边框效果，完整代码如下：

/* 基础样式 */
.sawtooth-box {
  width: 300px;
  height: 200px;
  background: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* 遮罩图设置 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10 Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10 Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  /* 遮罩图平铺方式 */
  -webkit-mask-size: 20px 10px;
  mask-size: 20px 10px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  /* 遮罩位置 顶部显示 */
  -webkit-mask-position: top;
  mask-position: top;
}

/* 同时添加底部锯齿 */
.sawtooth-box.bottom {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10 Z' fill='white'%3E%3C/path%3E%3C/svg%3E"), 
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 0 L10 10 L20 0 Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10 Z' fill='white'%3E%3C/path%3E%3C/svg%3E"), 
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 0 L10 10 L20 0 Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-size: 20px 10px, 20px 10px;
  mask-size: 20px 10px, 20px 10px;
  -webkit-mask-repeat: repeat-x, repeat-x;
  mask-repeat: repeat-x, repeat-x;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
}

对应的HTML结构如下：

<div class="sawtooth-box">仅顶部锯齿边框</div>
<div class="sawtooth-box bottom">上下都有锯齿边框</div>

代码中我们通过mask-position控制遮罩的显示位置，顶部的锯齿使用正三角形，底部的锯齿使用倒三角形，通过逗号分隔的方式同时应用多个遮罩层，实现多边的锯齿效果。

自定义锯齿样式与兼容性处理

如果需要调整锯齿的大小，只需要修改SVG中的width和height属性，以及对应path的绘制坐标即可。比如要制作高度为15px，宽度为30px的锯齿，SVG可以修改为：

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="15">
  <path d="M0 15 L15 0 L30 15 Z" fill="white"></path>
</svg>

mask-image属性目前主流现代浏览器都已经支持，如果需要兼容旧版浏览器，可以添加-webkit-前缀，同时可以准备降级方案，比如用伪元素叠加背景的方式实现类似效果，避免功能完全不可用。

注意事项

• 遮罩图的fill属性必须是白色，因为遮罩的透明度判断是基于亮度，白色代表完全不透明，黑色代表完全透明，其他颜色可能会导致显示异常。
• 如果元素本身有圆角或者边框，需要先将原有边框去掉，避免和遮罩效果冲突。
• 遮罩图的尺寸需要和mask-size匹配，否则会出现锯齿拉伸变形的问题。

CSSmask-image锯齿边框遮罩修改时间：2026-06-19 08:39:15