必须用 background 属性配合 linear-gradient() 实现按钮渐变，不可用废弃的 bgcolor 或 background-color；需重置原生样式（如 appearance、border）、用 background-position + transition 做平滑悬停动画，并为深色模式显式重写渐变值。
直接用 background 配 linear-gradient()，别碰 bgcolor 或内联 style 里写单色
HTML 标签本身不支持渐变色，bgcolor 属性早已废弃，且只接受单色；想让 <input type="submit"> 或 <button></button> 拥有渐变背景，必须靠 CSS 的 background 属性配合 linear-gradient() 函数。常见错误是只改 background-color，结果按钮还是平的——那根本不是渐变。
基础写法示例：
input[type="submit"] {
background: linear-gradient(135deg, #4facfe, #00f2fe);
border: none;
padding: 12px 24px;
border-radius: 8px;
color: white;
cursor: pointer;
}
- 角度写法必须带单位：
135deg有效，135无效 - 方向关键词如
to bottom right也行，但注意和角度逻辑不同（to right≈90deg） - 务必加
border: none，否则默认边框会压住渐变边缘，显得“毛边” - 如果按钮文字发虚，检查是否漏了
color—— 渐变不提供文字色，得单独设
input[type="submit"] 和 button 的样式重置不能省
原生 input[type="submit"] 在 Chrome/Firefox/Safari 下默认有内边距、阴影、边框甚至 -webkit-appearance，直接套渐变会错位或被遮盖。必须显式重置，否则圆角切不齐、点击区域不准、悬停抖动。
推荐最小化重置组合：
input[type="submit"],
button[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
- 不加
appearance: none，Safari 可能保留金属质感底纹，盖掉你的渐变 -
font: inherit比单独写font-family/font-size更稳，避免继承断裂 - 重置后务必补全
padding和border-radius，否则按钮会缩成一条线
悬停动画别用 background 切换，改用 background-position
写 :hover { background: linear-gradient(...); } 看似简单，实际会导致浏览器重绘整张背景图，边缘常闪白、卡顿，尤其三色以上渐变。真正平滑的做法是把渐变当一张“大图”，靠移动观看窗口来模拟流动感。
可行方案（水平渐变 + 左右滑动）：
input[type="submit"] {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b);
background-size: 300% 100%;
background-position: 0% 50%;
transition: background-position 0.4s ease;
}
input[type="submit"]:hover {
background-position: 100% 50%;
}
-
background-size必须 ≥ 色标数 × 100%，4 色就至少400% 100%，否则位移时断层 - 末尾重复首色（如上面的
#ff6b6b），保证循环无缝 - 移动端快速进出 hover 区域易卡在中间态，可加
touch-action: manipulation提升响应 - 别用
animation+@keyframes做无限流动——在 iOS Safari 上容易闪烁，background-position+transition兼容性更硬核
深色模式下渐变色自动适配要手动干预
CSS 媒体查询不会自动反转渐变方向或调亮颜色，@media (prefers-color-scheme: dark) 里必须显式重写 background 值，否则浅色渐变在黑背景下可能完全不可读。
示例（同一按钮在深色模式下改用冷灰系）：
@media (prefers-color-scheme: dark) {
input[type="submit"] {
background: linear-gradient(135deg, #2c3e50, #1a252f);
}
}
- 别依赖
color-scheme: light dark让浏览器自动调色——它只管表单控件基础色，不管你的自定义渐变 - 如果用了 CSS 变量管理颜色（如
--grad-start），记得在媒体查询里也覆盖变量值，否则无效 - 高 DPI 屏幕下渐变可能出现色带，加
image-rendering: -webkit-optimize-contrast可缓解（仅 WebKit）
linear-gradient()，而是重置原生样式、处理悬停重绘、适配深色模式这三处——漏掉任意一个，用户看到的就不是设计稿里的效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
