CSS3 渐变和阴影怎样用得更像界面而不是特效

CSS3 刚流行起来的时候，渐变和阴影往往是最能让人立刻看见变化的两个能力。按钮不再只有一块平色，弹层也终于能更自然地从页面里“浮”出来。但真正要写得顺眼，关键不是效果多，而是分寸感。

渐变最适合做轻微层次

一个按钮如果从上到下有很轻的颜色过渡，看起来会比纯色更有质感：

.btn {
  background: linear-gradient(#4b8df8, #2f6fe4);
  border: 1px solid #2b63c8;
  color: #fff;
}

这类写法在 2013 年非常常见，因为它能在不依赖图片的前提下，让界面细节丰富一点。

阴影更像是空间提示

box-shadow 真正有用的地方，不是让盒子变“华丽”，而是让层级更清楚。弹窗、下拉菜单、卡片区域，只要有一点合适的阴影，用户就能更容易感受到它和背景之间的关系。

别让每个元素都带一层重阴影

很多页面后来会显得土，通常不是因为用了 CSS3，而是因为所有地方都用得太重。每个按钮都强渐变，每个盒子都大阴影，页面马上就会变得发闷。把重点留给真正需要强调的地方，反而更像一个成熟界面。

样式细节应该和交互一起考虑

比如一个按钮 hover 时，不一定非要再加复杂动画。很多时候只是把阴影轻微加强、背景色略微变化，就已经足够让用户感受到“这个元素现在可操作”。这也是 CSS3 在那个阶段最实用的一面：把视觉和交互更轻地连起来。

小结

CSS3 渐变和阴影最好的用法，不是把页面堆成特效展示，而是帮界面建立轻微但明确的层次感。用得克制一点，反而更能体现设计和前端实现都开始变得成熟了。