用CSS实现按钮悬停对角渐变需统一使用135deg固定角度、background-size:200% 200%配合background-position从-100%-100%到100% 100%过渡，并设置background-origin:border-box和background-clip:padding-box确保圆角与padding下边缘干净无闪烁。
用 CSS 实现按钮悬停对角渐变背景
纯 CSS 就能搞定，不需要 JS 或图片。关键不是写 linear-gradient，而是控制方向、尺寸和过渡时机——很多人写了渐变但悬停时“闪一下”或“拉伸错位”，问题基本出在这三处。
方向必须用 deg 而不是 to top left 这类关键词
用 to bottom right 看似直观，但浏览器解析时会按容器宽高比动态计算角度，导致不同尺寸按钮渐变倾斜度不一致；而固定角度（如 135deg）才能保证所有按钮悬停时对角线严格一致。
- 推荐统一用
background: linear-gradient(135deg, #007bff, #0056b3) - 135deg = 从左上到右下对角线；45deg = 左下到右上
- 避免
to bottom right，尤其在响应式布局中容易偏移
背景尺寸和定位要配 background-size + background-position
直接写渐变常导致悬停瞬间整个背景重绘、颜色“跳变”。正确做法是让渐变图层比按钮大一倍，并通过定位控制入场位置：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
button {
background: #007bff;
background-image: linear-gradient(135deg, #007bff, #0056b3);
background-size: 200% 200%;
background-position: -100% -100%;
transition: background-position 0.3s ease;
}
button:hover {
background-position: 100% 100%;
}
-
background-size: 200% 200%让渐变区域覆盖按钮 4 倍面积 - 初始
background-position: -100% -100%把“左上角色块”藏在按钮外左上方 - 悬停时移到
100% 100%，相当于把“右下角色块”拖进按钮右下，形成对角扫过效果
别漏掉 background-origin 和 background-clip
按钮有内边距（padding）时，渐变默认从 content box 开始绘制，导致圆角处边缘发虚或色块错位。必须显式约束绘制范围：
立即学习“前端免费学习笔记（深入）”；
- 加
background-origin: border-box，让渐变从边框起点算起 - 加
background-clip: padding-box，防止渐变溢出圆角或边框 - 这两项不写，
border-radius超过 4px 就容易看到生硬裁切
真正难的不是写出渐变，是让多个不同尺寸、带圆角、有 padding 的按钮悬停时动画节奏一致、边缘干净、无闪烁——这些细节全靠 background-size、background-position 和 background-clip 配合压住。漏一个，就可能在 Safari 或旧 Edge 上出问题。
