前言

如今PC或者移动端的UI设计中,常用阴影或色块进行模块的划分和提升界面的显示层次感。

阴影和色块

可能作为一名前端开发者,在日常逛网站的时候回注意一些页面细节问题。比如布局是否合理啊、功能实现方法等等。有一个比较细节的和出现次数比较多的一个问题,就是box-shadow色值问题

问题描述

这里用_lodash官网进行展示。

Lodash官网顶部导航菜单阴影样式,在内容区域背景色为白色的时候看上去还是正常的。当背景色非白色的时候呢?

阴影部分在深灰色的底色下显示出了难看的灰色阴影。虽然不是非常影响视觉感受,但是这不是阴本来的样式。打开开发者工具看了一下,Header部分样式为:

header {
  box-shadow: 0 0 2.25rem #9da5ab;
}

色值#9da5ab颜色看上去如下,所以这个颜色是来自于设计稿吗?

现在我们把这个阴影颜色修改为rgba(0, 0, 0, .3)(这里适用黑色透明色,亦可使用其他颜色),新的页面展示效果是这样的:

header {
  box-shadow: 0 0 2.25rem rgba(0, 0, 0, .3);
}

结论

在阴影样式中使用rgba的透明通道,使阴影颜色对底部内容更好过渡,样式看上去更加协调一些。毕竟交互是前端重要的环节。