答案是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，把圆角+渐变边缘裁掉了，误以为是渐变异常

真正要解决的从来不是“怎么加渐变”，而是先确认你面对的是系统高光、色带干扰，还是自己写的渐变没生效——三者修复路径完全不同，混在一起调只会越调越乱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！