1 分钟 CSS 小技巧让你的 UI 看起来贵 10 倍

为什么同样是按钮，有的看起来高档大气，有的却显得廉价劣质？

秘诀就在于层次感。

就像 3D 电影比 2D 电影更有沉浸感一样，有深度的界面比扁平的界面更能抓住用户的注意力。

扁平的化界面就像一张平铺的纸，而有层次的界面就像立体的雕塑，自然显得更高级。

核心秘诀

苹果的产品为什么看起来那么高级？

其实原理很简单——就像化妆一样，层次感来自多重叠加。

回忆一下女朋友化妆的步骤：

1. 第一层：浅色打底（提亮）
2. 第二层：深色阴影（立体感）

界面设计也是同理：

• 第一层阴影：让元素“浮起来”
• 第二层阴影：让元素“站得住”

就这么简单！但效果却能让你惊叹。

现在让我们看些实际的例子。

应用场景

1. 鼠标悬停

CSS 代码很简单：

.card{background:var(--shade);border-radius:10px;box-shadow:inset 0 1px 0rgba(255,255,255,0.5),/* top glow */0 4px 6pxrgba(0,0,0,0.12);/* bottom drop */}

鼠标悬停时：

.card:hover{box-shadow:inset 0 1px 0rgba(255,255,255,0.5),0 10px 20pxrgba(0,0,0,0.16);transform:translateY(-2px);}

使用效果如下：

这种轻微的悬停提升效果能让用户界面感觉响应迅速且高端，而无需使用动画库。

激活标签

当前激活的标签页看起来应该比其他标签页位置更高。

代码如下：

.tab.active{background:var(--shade);box-shadow:inset 0 1px 0rgba(255,255,255,0.4),0 3px 6pxrgba(0,0,0,0.12);}

使用效果如下：

结论

我以前认为，优秀的 UI 需要复杂的渐变、自定义图标或大规模的重新设计。

事实证明，优秀设计很大程度上来自于细微的、有意设计的深度细节。

颜色图层 + 柔和阴影 = 廉价 UI → 高级 UI

现在就去试试吧！花 1 分钟，你就能让界面看起来贵 10 倍。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。