linear-gradient 必须显式声明方向（如to right或45deg），颜色停靠点需带单位（0%、100%），避免混用transparent与rgba；渐变与transform应分层实现，用伪元素承载背景；文字发虚可加text-shadow或反向渐变；移动端需用:active替代:hover并监听touch事件。
linear-gradient 背景写法容易漏掉单位或方向关键词
直接写 background: linear-gradient(#ff6b6b, #4ecdc4) 看似没问题，但浏览器默认按 to bottom 渲染——横向渐变按钮会失效。必须显式声明方向，比如水平渐变得写 to right，斜向用 45deg。
常见错误现象：颜色只显示一种、渐变带锯齿、hover 时背景突然跳变。
- 方向参数优先用角度（如
135deg），比to top left更可控、更易复现设计稿 - 颜色停靠点要加单位，
#ff6b6b 0%, #4ecdc4 100%比不写更稳妥，尤其涉及动画过渡时 - 别在
linear-gradient里混用透明度关键字（如transparent）和 rgba，rgba 更兼容旧版 Safari
hover 放大 + 渐变背景同时触发时的重绘陷阱
直接给按钮加 transform: scale(1.05) 和 background: linear-gradient(...)，Chrome 可能出现闪烁或卡顿——因为背景渐变在缩放过程中持续重绘。
解决核心是把渐变层和变换层分离，用伪元素承载背景，主元素只做 transform。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设
position: relative，再用::before绘制linear-gradient并铺满 - hover 时只对主元素应用
transform: scale(1.05)，伪元素保持静止，避免背景重绘 - 务必加
transition: transform 0.25s ease, background 0.25s ease，但两个属性不要合并成一个transition: all，否则会拖慢响应
按钮文字在渐变背景上发虚或对比度不足
纯色背景上看着正常的文字，在多色渐变上可能局部模糊甚至看不清，尤其浅灰字配蓝紫渐变时。
这不是字体问题，是抗锯齿策略在复杂背景下的失效。CSS 层面有三个低成本解法：
- 加
text-shadow: 0 0 2px rgba(0,0,0,0.2)，轻微描边能立刻提升可读性 - 用
backdrop-filter: blur(1px)包裹文字区域（注意 Safari 需前缀，iOS 兼容性有限） - 更稳的方案：改用深色文字 + 渐变反向（比如
linear-gradient(to right, #4ecdc4, #ff6b6b)），让文字始终压在较暗色块上
移动端 touch 交互下 hover 不生效的替代方案
在 iOS Safari 或安卓 Chrome 上，:hover 只在桌面模拟器或鼠标连接时触发，真机点按基本无效。不能只靠 hover 做反馈。
必须搭配 :active，且注意它和 hover 的样式逻辑要一致，否则用户会觉得“按下去没反应”。
-
:active中复用相同的transform: scale(0.98)，配合transition: transform 0.1s ease-out，比 hover 更快更干脆 - 避免在
:active里改background，容易和 hover 冲突；统一用 transform + opacity 微调即可 - 如果项目用了 CSS-in-JS 或框架，记得监听
touchstart/touchend手动切 class，补全原生缺失的 active 状态
渐变按钮最难的不是写法，是让不同设备、不同缩放比例、不同系统渲染引擎下都保持边缘锐利、过渡顺滑、点击有感。很多效果在 DevTools 里看着完美，一上真机就露馅——重点盯住 iOS Safari 的 transform 分层和 Android WebView 的 linear-gradient 插值精度。
