渐变按钮文字看不清的根源是背景亮度变化导致文字对比度不足，需同步调整color、border-color并用CSS变量适配深色模式，辅以字体加粗和抗锯齿优化。
为什么渐变按钮文字突然看不清
不是颜色写错了，是 Bootstrap 原生文字色（如 .btn-primary 的 #fff）只适配纯色背景，换成 linear-gradient() 后，背景平均亮度升高、局部明暗不均，导致文字实际对比度跌破 4.5:1。尤其在浅色渐变（如 #86b7fe → #0d6efd）上，#fff 会发灰、边缘虚化——OLED 屏更明显。
必须同步改 color 和 border-color
只换背景不调文字色，等于白干。关键动作是：用工具实测对比度，再反推安全色值，而非凭感觉调亮。
- 别直接用
color: #000：深色渐变上立刻不可读 - 对浅渐变背景（如
to right, #f8f9fa, #e9ecef），文字至少用color: #212529（L ≈ 17），不能低于#343a40 - 边框别省略：
border: 1px solid #dee2e6能锚定视觉边界，防止文字“融”进渐变过渡区 - 必须加
!important：Bootstrap 的.btn类里有高权重color声明，不加就覆盖不了
深色模式下渐变按钮文字消失的真正原因
渐变色值写死（如 #6a11cb, #2575fc）时，系统切到暗色主题，背景没变但文字仍用 #fff，结果和深灰背景对比度崩盘。这不是 CSS 没生效，是没做颜色感知适配。
- 用 CSS 变量定义渐变起止色：
--grad-start-light: #6a11cb; --grad-start-dark: #4a0a80; - 在
:root和@media (prefers-color-scheme: dark)里分别赋值 - 文字色也走变量：
color: var(--btn-text-on-grad, #fff);，并在暗色媒体查询中设为#e0e0e0或更高 L 值灰 - 禁用
text-shadow：它在深色模式下可能被系统强制覆盖或渲染异常
小字号按钮文字发虚，光调 color 没用
≤14px 的按钮文字，在渐变背景下极易毛边——根源是 font-weight: 400 + 系统抗锯齿弱化，和背景渐变无关。哪怕颜色完全正确，肉眼也觉得“糊”。
立即学习“前端免费学习笔记（深入）”；
- 强制设
font-weight: 500或更高；按钮内图标文字建议统一用600 - OLED 设备加
-webkit-font-smoothing: antialiased抑制子像素镶边（仅限 macOS/iOS） - 禁用已废弃的
font-smooth: always，它对现代浏览器无效 - 验证时开 DevTools → Rendering → Emulate vision deficiencies → Grayscale：如果灰度下文字仍清晰，说明亮度差真够了
