用svg画波浪纹作按钮背景需设viewbox="0 0 1200 120"、preserveaspectratio="xminymax meet"，路径闭合并用currentcolor填充，css中background-size:100% 100%、background-position:bottom、padding-bottom:0，避免缩放失真与浮动。
怎么用SVG画波浪纹并作为按钮背景
直接在按钮的 background-image 里嵌入 SVG，比用 Canvas 或 CSS 动画更轻量、缩放不失真。关键不是“画多漂亮”，而是让波浪贴合按钮上下边缘、不拉伸变形。
- SVG 必须设
viewBox（比如viewBox="0 0 1200 120"），不能只靠width/height控制尺寸，否则响应式下会错位 - 波浪路径建议用
<path d="M0,0 V20 C200,40 400,-10 600,20 C800,50 1000,10 1200,20 V0 Z"></path>这类三次贝塞尔曲线，V0 Z闭合路径才能形成可填充的形状 - 把 SVG 写成 data URL：用
encodeURIComponent()编码后拼进url("data:image/svg+xml,...")，避免额外 HTTP 请求
为什么波浪总在按钮中间“飘着”，而不是贴底？
常见原因是 SVG 的 viewBox 高度和按钮内边距不匹配，或没控制好 SVG 的 preserveAspectRatio。默认是 xMidYMid meet，会居中裁剪，导致波浪浮在半空。
- 把 SVG 的
preserveAspectRatio改成xMinYMax meet，这样波浪底部会自动对齐容器底边 - 按钮本身要设
padding-bottom: 0（如果波浪在下方），或padding-top: 0（如果在上方），否则内边距会把波浪“顶”起来 - 用
background-position: bottom强制锚点到底部，配合background-repeat: no-repeat
如何让波浪随按钮宽度自适应且不锯齿？
SVG 本质是矢量，但若导出时用了像素单位或没设 shape-rendering="crispEdges"，在高 DPI 屏幕上仍可能模糊。真正影响清晰度的是缩放方式和渲染提示。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- SVG 中所有坐标用无单位数值（即相对
viewBox），不要写px或em - 加
shape-rendering="geometricPrecision"（适合曲线）或"crispEdges"（适合硬边），避免浏览器自动平滑插值 - 按钮 CSS 加
backface-visibility: hidden和transform: translateZ(0)，强制 GPU 渲染，减少缩放抖动
点击时波浪怎么保持不动，只变色不跳动？
很多实现一 hover 就整个 SVG 背景重绘，导致波浪形变或闪烁。根本原因是背景图被重新计算尺寸或重载。
- 不要用
background-size: cover或contain—— 它们会动态缩放 SVG，破坏波浪比例 - 固定用
background-size: 100% 100%+background-position: bottom，确保波浪始终按原始 viewBox 比例铺满 - hover 只改
background-color（叠加层）或filter: brightness()，别动background-image本身
最易被忽略的一点：SVG 中路径的 fill 建议用 currentColor，这样按钮文字颜色一变，波浪自动同步，不用重复维护 fill 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
