答案是iOS Safari将button视为系统控件并硬编码叠加一层高光渐变（如to bottom的rgba过渡），该效果独立于CSS background且优先级更高；必须通过-webkit-appearance: none切断原生渲染，再手动补background-color、border等样式才能真正控制渐变。
不是 CSS 按钮“自带渐变”，而是 iOS Safari 把 button 当作系统控件直接绘制，你看到的所谓“渐变”其实是 WebKit 渲染引擎对原生按钮的默认高光模拟——它根本没走你的 CSS 渐变逻辑。
为什么 button 在 iOS Safari 里总像被加了渐变滤镜
这是 WebKit 对表单控件的 UA 样式硬编码行为：iOS Safari 会为 button 自动叠加一层从上到下的浅色到深色过渡（类似 linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(0,0,0,0.1))），用于模拟金属质感按钮的光照反馈。它独立于你的 background 声明，且优先级高于所有自定义背景。
- 这个“渐变”无法用
background覆盖，除非先解除原生渲染 - 它只在真机或 Safari 模拟器中出现，桌面 Safari 和 Chrome 都不复现
- 滚动、点击、焦点切换时，这层高光会动态变化，看起来像“活的渐变”
如何彻底关掉这个系统级渐变
核心动作是切断 WebKit 的原生绘制路径，让按钮真正进入 CSS 渲染管线：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须写
-webkit-appearance: none（Safari 15.4+ 可用appearance: none，但老版本仍需前缀） - 仅对
button加不够——input[type="submit"]、input[type="reset"]同样触发，需一并处理 - 加完后立刻补
background-color: transparent或显式渐变，否则按钮会回退成纯白或系统灰底 - 别漏
border: 1px solid transparent，否则某些 iOS 版本会因边框缺失导致高度塌陷
加了 -webkit-appearance: none 还有残影？检查这些点
即使强制关闭原生渲染，视觉上仍可能残留“渐变感”，常见原因：
立即学习“前端免费学习笔记（深入）”；
-
background-image: linear-gradient()写法未兼容旧 Safari：必须前置-webkit-linear-gradient()，且用background-image而非background - 渐变起止色对比太弱（如
#f8f8f8 → #ffffff），触发 Safari 的 16-bit 色带问题，看起来像几条灰黑横纹——这不是系统渐变，是渲染精度缺陷 - 伪元素承载渐变时漏了
transform: translateZ(0)，合成层未启用，渐变仍走低精度路径 - 父容器设了
overflow: hidden，把圆角+渐变边缘裁掉了，误以为是渐变异常
真正要解决的从来不是“怎么加渐变”，而是先确认你面对的是系统高光、色带干扰，还是自己写的渐变没生效——三者修复路径完全不同，混在一起调只会越调越乱。
