• 前言
• 问题描述
• 结论

• 📅 日期：2018年8月15日 星期三
• 🌤 天气：晴朗

前言

如今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的透明通道，使阴影颜色对底部内容更好过渡，样式看上去更加协调一些。毕竟交互是前端重要的环节。