wired-button 封装了手绘按钮的全部细节，避免 canvas 自实现的坐标偏移、抖动控制、移动端适配及高 DPR 问题；其 elevation 属性（0–4）调控抖动强度、描边粗细与阴影深度，disabled 状态自动降低对比度与抖动幅度，样式通过标准属性控制且不侵入 Shadow DOM。
直接用 wired-button 就能做出合格的手绘按钮，不用 canvas 手搓线条、也不用 CSS 模拟抖动——它已经把「手绘感」封装进 Web Component 里了。
为什么别自己用 canvas 画按钮边框
自己用 canvas 实现手绘按钮看似可控，但实际踩坑密集：坐标必须用 getBoundingClientRect() 算，否则滚动后偏移；lineCap = 'round' 和随机抖动得每段线单独加；移动端要 event.preventDefault() + touchAction: none；高 DPR 屏还得缩放缓冲区。而 wired-button 内部已处理全部这些细节，且渲染稳定、无重排、不依赖 JS 运行时状态。
- 你改
elevation属性，它自动调整阴影深度和描边粗细，不是简单加 box-shadow - 禁用状态（
disabled）会同步降低描边对比度和内部抖动幅度，模拟真实手绘褪色效果 - 所有样式通过标准 HTML 属性或内联
style控制，不侵入 Shadow DOM，调试可见
wired-button 的关键属性怎么选
elevation 不是“阴影值”，它控制的是整个手绘笔触的强度：数值越大，边缘抖动越明显、描边越粗、阴影越深。取值范围是 0–5，但实际推荐只用 1–4：
-
elevation="0"：几乎无抖动，适合嵌入式小按钮（如表格操作列），但失去手绘辨识度 -
elevation="2"：默认值，抖动自然，适合大多数场景 -
elevation="4"：边缘明显锯齿+粗描边，适合主操作按钮，但慎用于小尺寸（ - 别设
elevation="5"—— 在部分旧版 Safari 中会触发渲染异常，线条断裂
fill 属性只影响背景填充色，不改变描边颜色；描边始终为深灰（#333），这是手绘风格的视觉锚点，强行覆盖描边需用 style="--wired-button-stroke: red"，但会破坏原设计协调性。
立即学习“前端免费学习笔记（深入）”；
自定义时最容易漏掉的兼容性点
在 style 里写 background 或 color 没问题，但以下三点常被忽略：
-
font-size必须用px或em，禁用rem——wired-button内部计算抖动偏移时基于像素基准，rem在页面根字体变化时会导致描边错位 - 设置
width或height时，务必同时设min-width/min-height，否则在 flex 布局中可能被压缩变形，抖动线条被裁切 - 如果按钮放在
transform: scale(0.8)的容器里，wired-button不会自动适配缩放比例，描边会变细发虚——此时应改用 CSS 缩放整个按钮元素，而非包裹容器
真正难的不是让按钮“看起来像手绘”，而是让它在各种布局、缩放、禁用状态下，抖动节奏和描边质感依然可信。别碰 canvas 手绘逻辑，wired-button 的封装已经足够深，你只需要管好它的属性和父容器约束。
