纯CSS深度按钮靠多层linear-gradient叠加实现明暗错觉：第一层to bottom垂直高光渐变，第二层to right水平阴影渐变，顺序不可颠倒，用background-size/position精准控光效；stop-color是SVG属性，CSS中应写#fff 0%；:active时位移各层background-position增强按压感；IE11等旧环境用@supports降级单层渐变。
用 linear-gradient 叠加多层渐变实现视觉深度
纯 CSS 按钮的“深度感”不是靠阴影堆出来的，而是靠多层渐变叠加产生的明暗错觉。核心是用两个或更多 linear-gradient 作为 background-image，从不同方向、不同位置、不同透明度叠加。
常见错误是只写一层渐变 + box-shadow，结果在高对比屏或深色模式下显得扁平甚至发灰。
- 第一层用深色到浅色的垂直渐变（模拟顶部高光），
to bottom，起始色略亮于主色 - 第二层用主色到更暗色的水平渐变（模拟左侧阴影），
to right，终点设为rgba(0,0,0,0.1) - 两层顺序不能反：浏览器按声明顺序从下往上叠，深色层必须在底层
- 记得加
background-size控制每层覆盖范围，比如200% 200%配合background-position微调光效落点
为什么 stop-color 不是标准 CSS 属性？别被误导
stop-color 是 SVG 渐变里的属性，**不能直接用在 CSS 的 linear-gradient 中**。网上有些教程混用了 SVG 和 CSS 语法，导致复制代码后按钮没反应。
真正可用的是 CSS 的颜色停止点写法：color stop-position，比如 #3498db 0%, #2980b9 100%。如果写了 stop-color: #3498db，浏览器直接忽略整条声明。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
background: linear-gradient(to bottom, stop-color: #fff, stop-color: #ccc); - 正确写法：
background: linear-gradient(to bottom, #fff 0%, #ccc 100%); - 支持百分比、像素值、关键词（
from/to），但不支持命名 stop 属性
移动端点击反馈弱？给 :active 加渐变位移
深度感按钮在点击时如果只是变色，会丢失“按下去”的物理反馈。更自然的做法是让顶层渐变轻微偏移，模拟受压形变。
关键不是改颜色，而是动位置：用 background-position 在 :active 里微调各层坐标。
- 顶层高光层向下偏移
0 -2px，让亮区收缩 - 底层阴影层向右偏移
2px 0，强化挤压感 - 过渡用
background-position 0.1s ease，太慢像卡顿，太快看不出变化 - 注意：Safari 对多层
background-position过渡支持不稳定，建议加-webkit-background-position兜底
IE11 或旧安卓 WebView 怎么办？降级要留接口
多层渐变在 IE11 里只认第一层，旧安卓 WebView（如 Android 4.4）可能完全不渲染。硬加 @supports 判断反而增加维护成本。
更务实的做法是：用单层渐变打底，再用 @supports (background: linear-gradient(to right, red, blue)) 包裹增强层。这样老设备看到的是干净单色按钮，新设备才加载深度效果。
- 不要把所有样式都塞进
@supports块里，只包真正依赖多层渐变的部分 - 避免用
background-blend-mode做深度——兼容性比多层渐变更差，且和linear-gradient叠加逻辑冲突 - 测试时真机连上 Chrome DevTools 的 “Network → Disable cache” + “Rendering → Emulate CSS media features”，比单纯看 CanIUse 更准
最易被忽略的是：多层渐变的色值对比度必须足够，否则在 OLED 屏或弱光环境下，“深度”会直接塌成一片灰。调色时盯着实际设备看，别只信设计稿里的十六进制值。
