纯 css 渐变按钮需显式声明 background-color 降级、background-size ≥100%×100% 防露底，用 to right 比角度更兼容；文字渐变须 background-clip: text + -webkit-text-fill-color: transparent + display: inline-block；hover 动画应基于 background-position 过渡或 animation 控制，禁用 transition: background。
纯 CSS 就能做出稳定、兼容、可交互的渐变色按钮，不需要 JS，也不依赖 SVG 或 Canvas。关键不是堆颜色，而是选对属性、配好尺寸、控住动画节奏。
background: linear-gradient() 怎么写才不露白底
直接写 background: linear-gradient(to right, #ff6b6b, #4ecdc4) 很容易在圆角或小尺寸按钮上露出底色——因为渐变默认只铺满元素尺寸，border-radius 裁剪后边缘会透出父容器背景。
- 必须显式加
background-color降级 fallback，比如background-color: #ff6b6b，否则 Safari 或旧安卓 WebView 可能渲染成透明 - 如果按钮有
padding，确保background-size≥ 100% × 100%，否则文字区域可能没被渐变覆盖 - 用
to right比90deg更稳妥：前者是关键词，后者角度在某些 Android WebView 里解析偏移（尤其带小数时） - 三色以上渐变务必锚定色标位置，例如
linear-gradient(to right, #ff6b6b 0%, #4ecdc4 50%, #44b5b1 100%)，否则中间色权重失控
button 文字怎么填渐变色才不糊边
color: linear-gradient() 一定无效，浏览器直接忽略。真正起作用的是 background-clip: text + -webkit-text-fill-color: transparent 这套组合，但漏掉任一环节都会糊边、断字或 Safari 下残留灰边。
- 必须设
display: inline-block（哪怕按钮默认是 inline），block元素在部分 Safari 版本中会裁剪异常 -
color: transparent和-webkit-text-fill-color: transparent都要写，缺一不可；Safari 16–17.4 单写前者会留灰边 - 避免父容器有
overflow: hidden（比如轮播图 wrapper），它会把渐变文字硬切掉，不是 bug 是盒模型行为 - 字体粗细影响裁剪精度：
font-weight: bold比normal更易出现边缘锯齿，可用text-shadow: 0 1px 1px rgba(0,0,0,0.1)稍微柔化
hover 时渐变动起来但不卡顿
别写 transition: background 0.3s —— 它对 linear-gradient() 静默失效，实际是跳变。真正可过渡的只有 background-position 和 background-size，靠“拖动窗口看大图”实现流动感。
- 初始样式就要带完整
animation，例如animation: gradientShift 4.5s ease-in-out infinite，否则:hover加动画会闪一下 -
:hover里只改animation-play-state: paused，不要用animation: none，后者触发重绘抖动 - 移动端快速进出 hover 区域易停在中间帧，加
touch-action: manipulation并配:active { opacity: 0.8; }补反馈 - 低端安卓机上动画掉帧？加
will-change: background-position，但仅在动画元素上用，别全局滥用
圆角+渐变边框怎么不出裂口
直接 border: 3px solid linear-gradient(...) 语法错误，border-color 不接受图像值。所谓“渐变描边”，本质是模拟——三种方案里，clip-path: inset() 最轻量且圆角完整，::before 伪元素最可控但代码稍多。
- 用
clip-path: inset(3px)模拟 3px 边框时，必须配padding: 12px 24px，否则文字会被裁掉 -
border-image方案要三件套齐：①border: 3px solid transparent，②border-image-source: linear-gradient(...)，③border-image-slice: 1（不是100%） - Safari 17.4 及更早版本不支持
border-image渐变，线上项目慎用；clip-path在 IE 完全不支持，但至少降级为纯色背景 - 伪元素方案中，
::before必须设z-index: -1且按钮本身position: relative，否则遮挡文字或定位漂移
最易被忽略的点：所有渐变动画都依赖 background-size 大于元素尺寸，但这个“大多少”得按色标数量算——4 色渐变至少 400% 400%，否则位移时断层。没人会盯着 DevTools 里 background-size 的数值调，结果就是动画到一半突然跳回起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
