::placeholder无法直接应用渐变色，因浏览器仅支持color、opacity等有限属性，background-image被忽略；可用text-shadow多层叠加模拟文字渐变，或用label/span模拟placeholder实现背景渐变。
为什么::placeholder无法直接应用渐变色
因为浏览器对::placeholder伪元素的CSS支持有限：多数引擎（Chrome、Edge、Safari）只接受color、opacity、font相关属性，background和background-image会被忽略，linear-gradient()自然不生效。你写的background: linear-gradient(...)在开发者工具里能看到，但实际渲染为空白或回退到默认灰。
用color + text-shadow模拟渐变文字效果
这是目前最可靠、兼容性最好的替代方案——把渐变“画”在文字上，而非背景。核心思路是用多层text-shadow叠加不同颜色与偏移，配合半透明color实现过渡感。
-
color设为透明或极浅色（如rgba(0,0,0,0.1)），避免遮盖阴影 -
text-shadow写三段，分别对应起始色、中间色、结束色，水平偏移递增（如0.1em,0.2em,0.3em），模糊值保持0保证清晰 - 注意 Safari 对
text-shadow层级限制更严，建议不超过 3 层；Firefox 支持稍好，但依然不推荐超过 4 层
input::placeholder {
color: rgba(0, 0, 0, 0.1);
text-shadow:
0.1em 0 #ff6b6b,
0.2em 0 #4ecdc4,
0.3em 0 #44b5b1;
}
真正要渐变背景？得绕开::placeholder本身
如果设计稿明确要求 placeholder 区域带背景渐变（比如输入框内底色从左到右变化），::placeholder做不到，必须换思路：
- 用
background-clip: text+-webkit-text-fill-color: transparent把 placeholder 文字“镂空”，再给 input 本身加渐变背景——但要注意这会让 placeholder 文字完全不可见，需搭配color和opacity微调可见度 - 更稳妥的做法：放弃原生 placeholder，用
<label></label>或绝对定位的<span></span>模拟 placeholder，并手动控制显隐（监听focus/input事件） - 这种模拟方式能完全自由设置背景、边框、动画，但会增加 DOM 复杂度和 JS 维护成本，适合对 UI 控制精度要求高的场景
各浏览器对::placeholder的前缀差异不能漏
虽然现代 Chrome/Firefox 已支持标准 ::placeholder，但旧版仍需前缀，尤其 iOS Safari 15.4 及更早版本只认 ::-webkit-input-placeholder：
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
/* 所有样式都要重复写在这儿 */
color: rgba(0,0,0,0.1);
text-shadow: 0.1em 0 #ff6b6b, 0.2em 0 #4ecdc4;
}
漏掉任一前缀，对应浏览器就会回退到系统默认灰色，且不会报错——这种失效非常隐蔽。
渐变色在 placeholder 上本质是视觉欺骗，真正难点不在写法，而在判断「这里到底需要的是文字渐变感，还是背景渐变区域」；后者几乎必然要脱离伪元素，走向自定义实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
