实心立体投影按钮需高光、投影与按压位移三者物理逻辑对齐：顶部浅色高光（box-shadow: 0 -2px 0 2px #fff）、底部深色投影（, 0 3px 6px rgba(0,0,0,0.15)）顺序不可颠倒；:active 状态须同步 translatey(2px) 与收缩阴影，并配以一致时长的 transition。
实心立体投影按钮不是靠一层 box-shadow 堆出来的，关键在于高光与投影的物理逻辑对齐：顶部浅色边 + 底部深色影 + 按下时位移收缩，三者缺一不可。
用两层 box-shadow 模拟光源方向
单层阴影会让按钮“浮”在页面上，失去凸起感。必须拆成两层，且顺序不能错：
- 第一层是顶部高光：
box-shadow: 0 -2px 0 2px #fff（注意 vertical offset 是负值，表示向上偏移） - 第二层是底部投影：
, 0 3px 6px rgba(0,0,0,0.15)（逗号分隔，写在高光后面） - 顺序反了会盖住高光；移动端慎用大
blur值（如12px），模糊边界会吃掉点击热区
:active 状态必须同步位移和阴影收缩
只改背景色或透明度，用户根本感知不到“按下去”。真实按压是下沉+受压变形：
- 下沉位移用
transform: translateY(2px)（向下，不是向上） - 同步收窄阴影：
box-shadow: 0 1px 3px rgba(0,0,0,0.2)（比常态更小、更锐） - 取消 inset 高光里的垂直偏移：
inset 0 1px 0 #eee→ 改成inset 0 0 0 #eee，模拟受压后亮边压缩 - 过渡只写关键属性：
transition: transform 0.18s, box-shadow 0.18s；别用all，容易拖慢其他属性
渐变与圆角要配合阴影明暗逻辑
背景渐变方向不匹配，立体感就垮了一半：
- 主渐变建议用
linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)，让亮部朝向高光侧（左上） - 圆角值不宜过大（推荐
border-radius: 6px），否则阴影边缘失真 - 避免纯色背景配强投影——明暗对比不够时，高光和投影都会发灰，建议用中高饱和度渐变打底
最容易被忽略的是：transform 和 box-shadow 必须同时进 transition，且时间严格一致；否则位移和阴影不同步，“按下去”的物理反馈就断掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
