用 radial-gradient 配合 background-size 和 background-position 可实现兼容性好的邮票锯齿边框，关键在于半圆齿单元的像素级对齐与负偏移定位，辅以 box-shadow 模拟压痕，并注意齿色与背景的微反差提升真实感。
直接用 background-image 配合 radial-gradient + background-size + background-position 就能做出邮票锯齿边框，不用伪元素、不依赖 SVG、兼容性好（Chrome 10+ / Firefox 16+ / Safari 5.1+），但必须注意锯齿单元和定位的数值关系，否则边缘会错位或露白。
用 radial-gradient 模拟半圆齿形
邮票锯齿本质是一排等距排列的透明半圆，每个“齿”由两个相邻半圆拼成。CSS 里最稳的方式是用 radial-gradient 画单个透明半圆，再靠 background-size 控制间距和大小：
-
radial-gradient(transparent 0px, transparent 4px, white 4px, white)：前 4px 透明，第 4px 开始切出白色半圆轮廓（实际是硬边过渡，视觉上就是齿尖） -
background-size: 20px 20px表示每个“齿单元”宽高都是 20px；若改成15px 14px，齿会更密更扁，适合小尺寸优惠券 - 这个渐变本身不带颜色，只起“镂空”作用，所以背景色得靠父容器或
background-color提供
background-position 决定锯齿起始位置
锯齿必须严丝合缝贴在元素边缘，否则会看到断口或重叠。关键在于 background-position 的负偏移：
- 顶部/左侧锯齿：用
background-position: -10px 0（假设background-size: 20px 20px） - 底部/右侧锯齿：用
background-position: -10px -10px，让最后一个半圆的下半部分刚好落在底边 - 如果改了
background-size，比如设为16px 16px，那对应偏移就得改成-8px，否则齿形会错位 - 别用百分比值（如
0% 100%），它在不同尺寸下无法保证像素级对齐
加 box-shadow 模拟邮票压痕效果
纯锯齿只是轮廓，真实邮票还有微微内陷的阴影感。用 :after 叠一层偏移的 box-shadow 最轻量：
.stamp:after { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; z-index: -1; box-shadow: 0 0 20px 1px rgba(0,0,0,0.5); }-
top/left/right/bottom各设5px是为了留出阴影空间，数值要和padding或border协调，否则阴影会被裁掉 - 阴影模糊值（
20px）不宜过大，否则锯齿边缘会发虚；扩散值（1px）保持细线感，模拟压印力度 - 别忘了给
.stamp加position: relative，否则:after会相对于 body 定位
mask-image 方案虽优雅但有兼容陷阱
用 mask-image: repeating-linear-gradient 确实更灵活，能控制齿向、角度、深浅，但现实限制明显：
-
mask-image在 Safari 15.4 之前不支持repeating-linear-gradient作为遮罩源，iOS 15.0–15.3 用户看到的是纯色块 - 所有浏览器对
mask-position: 0 100%的解析不一致，Firefox 常把锯齿顶到内容区内部，需额外加mask-clip: content-box - 一旦元素有
transform或filter，mask 渲染可能失效或性能骤降，尤其在低端安卓机上 - 如果你只支持现代桌面端且能接受 polyfill，它值得试；但只要还要照顾微信内置浏览器或旧版 Safari，就老实用
radial-gradient方案
真正容易被忽略的是：锯齿边框的「呼吸感」来自背景色与齿色的微弱反差。全白背景配纯白齿会消失，建议齿用 #f8f8f8 这类略灰的色值，或者给整个容器加一像素的 border: 1px solid #e0e0e0 作底层衬线——这点细节，决定了是“像邮票”还是“就是邮票”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
