不能用 border-style: wavy 实现波浪边框，因 w3c 规范未定义该值，所有浏览器均忽略并退化为 solid；可靠方案是用 svg 路径作伪元素背景，配合 path:// 或 data url、repeat-x 与精确整数坐标实现跨端兼容的波浪线效果。
直接用 CSS border-style 实现不了波浪边框——浏览器根本不支持 wavy 或 wave 值，所有“CSS 一行搞定波浪边框”的写法都是错的或不可靠的。
为什么不能用 border-style: wavy？
W3C 规范里压根没定义这个值，Chrome/Firefox/Safari 都会忽略它，退回到 solid。有人试过 border-image + SVG data URL，但多数浏览器（尤其是旧版 Safari 和部分安卓 WebView）对 border-image 中的 SVG 渲染不一致，容易错位、拉伸或直接不显示。
真正能跨端稳定工作的方案只有一条路：用 SVG 路径当背景，配合伪元素模拟边框。
button::before + path:// 背景实现上边波浪线
核心是把波浪画成一段可横向平铺的 SVG 路径，作为伪元素的背景图，而不是塞进 border。
-
::before必须设content: ""、position: absolute、top: -2px、left: -2px、width: calc(100% + 4px)、height: 4px（假设线粗 2px） - 背景用
background-image: url("data:image/svg+xml,%3Cpath d='M0,0 C20,-8 40,8 60,0 C80,-8 100,8 120,0' fill='none' stroke='%23007bff' stroke-width='2'/%3E")，注意 URL 编码 - 关键参数：
background-repeat: repeat-x、background-size: 120px 4px（必须和路径终点 x 坐标一致，否则重复处断开） - 路径 y 坐标要严格围绕 0 波动（如
C20,-8→C40,8），否则重复时上下错位
移动端 SVG 背景错位怎么办？
某些安卓 WebView（特别是 Android 10–12 的系统 WebView）在 background-repeat: repeat-x + SVG 场景下会出现 1px 级别偏移，导致波浪接缝露白。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
缓解方法：
- 给伪元素加
transform: translateZ(0)强制 GPU 渲染 - 路径坐标全部用整数（避免
20.333这类小数） - 导出 SVG 时关闭 Inkscape 的“响应式”选项，固定
viewBox="0 0 120 4" - 不要用
background-size: 100% 100%—— 它会缩放路径破坏波长，必须用固定像素值匹配 d 属性宽度
hover 时波浪变形或闪烁？
常见原因是 hover 里改了 background-size 或 background-position，触发浏览器重绘整个 SVG 背景，导致波形比例失真。
正确做法：
- hover 只改
background-color（叠加层）、filter: brightness()或伪元素opacity - 保持
background-size和background-repeat不变 - 如果要颜色变化，用
stroke颜色编码进 data URL（如%23ff6b6b），而非改 background-color - 避免在动画中频繁拼接新 data URL —— 每次拼接都触发重新解析，卡顿明显
最易被忽略的一点：波浪路径的起点和终点 x 坐标必须严格相等（比如都是 0 和 120），否则 repeat-x 会在接缝处撕裂。这不是“差不多就行”的事，差 0.1px 就可能在高 DPR 屏上暴露锯齿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
