同样是个按钮，为什么有的看起来舒服，有的看着就廉价？差别就在层次感上。
你看3D电影比2D电影看着过瘾，就是因为有深度。界面也一样。平的界面像张纸，有层次的界面像雕塑，自然显得更高级。
核心秘诀就一句话：两层阴影
苹果的东西为什么看着高级？
原理其实简单，就跟化妆一样。化妆怎么化？先打底提亮，再上阴影让脸立体。界面也是这个道理。
第一层阴影，让元素"浮起来"。第二层阴影，让元素"站得住"。
就这么简单。但效果差很多。
代码怎么写
来看几个例子。
1. 卡片悬停效果
先写基础样式：
.card {
background: #f5f5f7;
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5), /* 上边缘的高光 */
0 4px 6px rgba(0, 0, 0, 0.12); /* 下方的投影 */
}鼠标放上去的时候，让卡片稍微抬起来：
.card:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 10px 20px rgba(0, 0, 0, 0.16);
transform: translateY(-2px);
}悬停时往上移2个像素，阴影变大变深。这个小动画不用任何JS库，浏览器自己就能跑得很顺。用户鼠标滑过的时候，感觉界面会"回应"他，一下子就显得高级了。
2. 标签页激活效果
再看标签页。哪个是当前选中的，要一眼看出来。
.tab {
background: #e4e6e9;
padding: 8px 16px;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 2px 4px rgba(0, 0, 0, 0.08);
}
.tab.active {
background: #f5f5f7;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 3px 6px rgba(0, 0, 0, 0.12);
}激活的标签背景更亮，阴影更深，看着就像浮在其他标签上面。用户不用猜就知道当前在哪。
为什么两层阴影就够了
很多人以为好界面要复杂的渐变、定制的图标、大改设计。其实不是。
好设计往往来自这些不起眼的小细节。
单层阴影的界面，看着就是一块平板贴在上面。两层阴影就不一样了。高光让边缘有亮度，投影让底部有深度。一高一低，一明一暗，层次就出来了。
就像画画，光有亮部不行，光有暗部也不行。亮暗配合，东西才立体。
更多能用的地方
这种两层阴影的用法，不止卡和标签。
按钮也可以。普通状态一层阴影，点击的时候把内阴影调一下，让按钮有按下去的视觉反馈。
弹窗也可以。周围加一层大的外阴影，中间的内容再加一层小的内高光，弹窗就显得又深又精致。
输入框也可以。聚焦的时候加内发光和外阴影，用户就知道当前在输哪个框。
几点注意
阴影不是越重越好。太重了像廉价塑料玩具，太轻了又看不出效果。一般外阴影用半透明的黑色，内高光用半透明的白色。黑和白都别太纯，带点透明度才自然。
另外颜色也要搭。深色背景上，高光可以用半透明白，阴影可以用半透明白或者带点背景色的黑。别生搬硬套，得配合实际颜色调。
移动端要注意性能。阴影太多太复杂，低端手机会卡。一般用两层就够了，别堆太多层。
总结
颜色图层加柔和阴影，就能让廉价界面变高级。就这么简单。
现在打开你的代码，找个卡片或者按钮试试。改两行阴影，不用1分钟，效果自己看。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！