用linear-gradient实现按钮背景渐变时，需省略background-color、至少设两个色标、配合background-clip避免露白；radial-gradient宜用百分比定位圆心并设transparent控制光晕；须声明纯色兜底防降级失效，注意多层叠加性能与色觉可访问性。
button背景用linear-gradient实现方向性渐变
直接在background里写linear-gradient是最常用方式，但要注意：浏览器默认会把按钮的background-color覆盖掉，所以别再单独设background-color，否则渐变不生效。
常见写法示例：
button {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
-
135deg表示从左上到右下，to bottom right语义等价但兼容性略差（IE不支持） - 至少写两个色标，否则渲染不可靠；单色
linear-gradient(#fff, #fff)本质等于纯色，但多了一层计算开销 - 如果按钮有
border，渐变默认不填充边框区域，需配合background-clip: padding-box避免意外露白边
用radial-gradient营造聚焦或悬浮感
radial-gradient适合做中心高亮、按下反馈或装饰性光斑，但默认是圆形且从中心发散——如果不指定尺寸和位置，小按钮上容易只看到一个色点。
实用写法示例：
立即学习“前端免费学习笔记（深入）”；
button:hover {
background: radial-gradient(circle at 20% 30%, #ff9a9e 0%, transparent 50%);
}
-
circle at 20% 30%把圆心锚定在按钮左上区域，比默认居中更自然 - 第二个色标用
transparent控制光晕范围，数值太大（如80%）会让整个按钮变灰蒙蒙 - 不要和
linear-gradient混用在同一background值里却不加括号包裹——background: linear-gradient(...) radial-gradient(...)是非法语法，必须用逗号分隔并确保每段都是独立函数
渐变按钮在真实项目中的兼容与降级处理
IE10+支持标准linear-gradient，但IE旧版本需要-ms-filter（已废弃），实际项目中基本可忽略。真正要防的是「渐变失效后按钮变透明」这种事故。
- 始终在
linear-gradient前声明一层纯色background作为兜底：background: #4a6fa5; background: linear-gradient(...); - 移动端Safari对
radial-gradient的at语法支持良好，但Android UC内核曾解析错closest-side这类关键字，建议坚持用百分比或像素定位 - 如果按钮文字颜色随背景动态变化（比如深渐变配浅字），别依赖JS计算对比度——CSS已有
color-scheme: light dark配合prefers-color-scheme，但渐变本身不触发系统主题切换，得手动配两套
性能和可访问性容易被忽略的点
渐变本身是GPU加速的，但滥用多层叠加（比如background里叠3个radial-gradient）会导致重绘卡顿，尤其在低端安卓机上。
- 用
will-change: background对hover动画无实质帮助，反而可能引发额外图层合成，不如老实用transition: background 0.2s ease - 屏幕阅读器不感知背景色，但色觉障碍用户可能无法区分渐变中的相近色带——比如
#4a90e2 → #50e3c2在蓝绿色弱者眼里几乎是同色，务必用工具校验对比度 - 禁用动画时（
prefers-reduced-motion: reduce），渐变本身不受影响，但如果你给background加了hover过渡，记得同步加媒体查询关闭它
