同样是个按钮，为什么有的看起来舒服，有的看着就廉价？差别就在层次感上。

你看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分钟，效果自己看。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13383