没有“通用锯齿边框”css属性，所有方案均为视觉模拟；clip-path需严格对称闭合坐标，mask-image兼容性最佳但需配mask-position，伪元素易脱标，canvas适合动态高精度场景。
没有“通用锯齿边框”CSS属性，所有方案都是视觉模拟——选错方法会导致布局错乱、响应失效或高维护成本。
clip-path: polygon() 画锯齿圆圈时坐标容易错位
用 clip-path: polygon() 拼锯齿圆，本质是手动列出一圈顶点坐标。常见错误是：坐标点数为奇数、首尾不闭合、百分比超出 0–100% 范围，导致图形塌陷或显示为空。
- 必须保证坐标点成对对称（如顶部和底部锯齿数量一致），否则圆会歪斜
- 每个锯齿由两个相邻点定义（例如
60% 5%→70% 0%），中间那个“尖角”靠第三个点撑开 - 修改锯齿大小时，只调单个坐标的偏移量（如把
5%改成10%）会导致上下不对称，应同步调整对称位置的值 - 该方案在 Safari 15.4+ 和 Chrome 102+ 稳定，但 Firefox 对
clip-path的polygon()百分比解析偶有偏差，建议加transform: scale(0.999)触发重绘规避
mask-image + repeating-linear-gradient 控制底部锯齿最稳
给元素底部加锯齿边框，mask-image 是目前兼容性与可控性平衡最好的方式。它不侵占布局流，也不依赖伪元素定位，且支持缩放和动画。
- 核心代码中
repeating-linear-gradient(-45deg, transparent 0 10px, black 10px 20px)的角度和断点必须严格匹配mask-size；若把20px 20px改成30px 30px却没调渐变断点，锯齿会拉长变形 - 锯齿方向由渐变角度决定：
-45deg得到右下斜齿，45deg得到左下斜齿，0deg则是水平齿（但易显生硬） - IE 完全不支持
mask-image，Edge 16–18 需加-webkit-前缀；如需兼容旧浏览器，得 fallback 到::after伪元素方案 - 注意 mask 默认作用于整个元素，若只要底部锯齿，必须配
mask-position: 0 100%，漏写这句就会满屏锯齿
::before/::after 伪元素拼锯齿要防脱标和重绘抖动
用两个伪元素分别画上、下锯齿，适合需要独立配色或 hover 动画的场景，但极易因 position: absolute 脱离文档流而引发父容器高度塌陷。
- 父元素必须设
position: relative，否则伪元素会相对于 body 定位 - 锯齿高度（如
height: 12px）和背景渐变的background-size必须严格对应，否则会出现齿距错位或空白缺口 - 多个锯齿块拼接时，
background-repeat: repeat-x若未配合background-position对齐起点，首尾会露白缝 - 滚动或缩放时，Chrome 下偶发伪元素重绘延迟，表现为锯齿闪烁；可加
will-change: transform或临时套一层transform: translateZ(0)强制 GPU 加速
Canvas 绘制锯齿矩形适合动态或高精度需求
当锯齿需随数据变化（如进度条齿数实时增减）、或要求像素级对齐（如打印导出），CSS 方案会力不从心，此时 Canvas 是唯一可靠选择。
- 不要用
strokeRect()直接描边，它画不出齿——得用beginPath()+lineTo()手动连点，或用arc()在角上画半圆齿 - Canvas 坐标系 y 轴向下，设置
arc(x, 5, 5, ...)表示顶部小圆齿，arc(x, height-5, 5, ...)才是底部齿 - 响应式场景下，必须监听
window.resize并重新调用canvas.width = canvas.offsetWidth和重绘，否则锯齿会糊或错位 - Canvas 内容无法被 CSS 选择器选中，也不能继承父元素字体/颜色，所有样式都得在 JS 里硬编码
真正难的不是画出锯齿，而是判断它该出现在哪一层：是作为装饰边框（用 mask-image），还是结构化组件的一部分（用 clip-path），又或者承载交互逻辑（用 canvas）。选错层级，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
