基础立体感按钮需用 linear-gradient 背景 + 双层 box-shadow（外阴影模拟下压、内阴影模拟高光），配合 border-image 实现包边式边框，::after 伪元素叠加 radial-gradient 高光，并设置 touch-action: manipulation 确保移动端点击反馈。
用 linear-gradient + box-shadow 搭配出基础立体感
按钮“立体”本质是模拟光照下的明暗过渡，不是靠堆叠多层元素。最轻量、兼容性最好的方式是：线性渐变背景 + 单侧偏移阴影。
常见错误是只加 box-shadow: 0 4px 8px rgba(0,0,0,0.2) —— 这会让按钮像浮在空中，但没“压下去”的受力感。真正有立体反馈的写法要分两层阴影：
-
box-shadow: 0 2px 4px rgba(0,0,0,0.15)（近阴影，模拟按钮轻微下压） -
inset 0 1px 2px rgba(255,255,255,0.4)（内阴影，模拟顶部高光）
同时背景必须用带方向的渐变，比如 linear-gradient(145deg, #4a90e2, #2c5f9c)，角度要和内阴影方向呼应（145deg 是左上到右下，高光自然落在左上角）。别用 to bottom 这类模糊语法，不同浏览器解析偏差大。
border-image 实现“包边式”立体边框
很多教程用伪元素盖一层渐变当边框，结果点击区域错位、文字被遮、z-index 乱套。真正干净的做法是用 border-image，它才是 CSS 原生支持的“带质感边框”方案。
立即学习“前端免费学习笔记（深入）”；
但漏掉任意一项就会失效：
-
border-width: 2px（必须设具体值，thin不行） -
border-style: solid（none或hidden直接禁用border-image） -
border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4) 1（末尾1是border-image-slice，设成0或省略就裁切）
注意：小尺寸按钮（比如 width: 40px）上，border-image 拉伸后容易色块断层。此时改用 background: linear-gradient() + background-clip: padding-box 模拟边框更稳。
径向渐变叠加提升凸起感
单纯线性渐变+阴影还是偏平。要让按钮看起来“鼓出来”，得在表面加一层 radial-gradient 高光遮罩，但不能用 background-image 叠加——那样会盖住文字或干扰渐变主色。
正确做法是用 ::after 伪元素，且必须满足三个条件：
- 按钮本身设
position: relative -
::after设position: absolute; top: 0; left: 0; width: 100%; height: 100%，并加z-index: 1 -
::after的background写成radial-gradient(circle at 25% 25%, rgba(255,255,255,0.3) 0%, transparent 60%)
关键点：circle at 25% 25% 把高光锚点偏移到左上，配合 linear-gradient(145deg, ...) 才能形成统一光源方向；透明度别超过 0.4，否则文字发灰。
移动端点击无反馈？不是样式问题，是 touch-action 锁了
在 iOS Safari 和部分安卓 WebView 里，即使你写了完美的 :hover 和 transition，快速点击后动画卡住、颜色不变化——这通常不是 CSS 写错了，而是浏览器压制了原生点击反馈。
解决方法不是加 JS，而是加一行声明：
button { touch-action: manipulation; }
它告诉浏览器：“这个按钮就是用来点的，请放开手势拦截”。没有这句，:active 状态可能根本不会触发，或者延迟 300ms。另外，will-change: background-position 这类优化在移动端慎用，反而容易引发重绘抖动。
