用 linear-gradient() 制作渐变按钮需显式声明方向（如 to right 或 135deg），hover/active 状态须重写整条渐变并配 transition，加 background-clip: padding-box 防圆角裁切，ie 兼容需 filter 回退，尺寸推荐 em 单位统一缩放。
直接用 linear-gradient() 就能做出时尚渐变按钮，不需要图片、不用 JS，但必须处理好浏览器兼容性和状态逻辑，否则在 Safari 旧版或 IE 中会直接塌成单色块。
background: linear-gradient() 的写法必须带方向参数
只写 background: linear-gradient(#ff6b6b, #4ecdc4) 在部分 Safari 和旧版 Chrome 里会失效——它默认按 to bottom，但某些引擎解析不一致。显式声明方向最稳：
-
background: linear-gradient(to right, #ff6b6b, #4ecdc4)—— 水平渐变，适合宽按钮 -
background: linear-gradient(135deg, #6a11cb, #2575fc)—— 用角度更精确控制光感走向 - 避免用
top/bottom这类关键词，IE 旧滤镜和部分安卓 WebView 对它们支持混乱
:hover 和 :active 状态不能只改 background-color
渐变按钮的交互不是简单换颜色，而是要维持渐变结构。如果 hover 时只写 background-color: #333，整个渐变就丢了，视觉断层明显：
- 正确做法是重写整条
linear-gradient()，比如加深起点色、调高终点透明度：background: linear-gradient(to right, #d63333, #2aa8a8) -
:active建议加transform: translateY(1px)（比position: relative; top: 1px更轻量且不影响文档流） - 别忘了配
transition: background 0.2s ease，否则渐变切换生硬；但不要对transform加过渡，它天然硬件加速
圆角 + 渐变 + 阴影容易漏掉关键兼容写法
现代 CSS 写 border-radius 和 box-shadow 没问题，但渐变背景在圆角区域会被裁切——尤其当按钮内容少、padding 小时，边缘会露出底色：
- 必须加
background-clip: padding-box（默认值，但显式声明可防某些 Android 浏览器误裁） - 阴影要用
box-shadow，别依赖渐变模拟；text-shadow可以强化文字对比，但别设太厚，否则在 Retina 屏上发虚 - IE 10–11 不支持
linear-gradient()标准语法，得补filter: progid:DXImageTransform.Microsoft.gradient(...)，虽然现在基本可弃，但如果项目还要兼容内网 IE，这行不能少
真正难的不是写出第一版渐变，而是让按钮在不同字号、不同 padding、不同父容器宽度下都保持比例协调——em 单位比 px 更可靠，但记得所有涉及尺寸的属性（padding、border-radius、font-size）得同步缩放，否则圆角会突然“撑开”或“收紧”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
