我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
我是 HullQin，公众号「线下团聚游戏」的作者 （欢送关注公众号，分割我，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《咱们用 48h，单干发明了一款 Web 游戏：Dice Crush，加入国内赛事》加入 Game Jam 2022。喜爱能够关注我噢～我有空了会分享做游戏的相干技术，会在这 2 个专栏里分享：《教你做小游戏》、《极致用户体验》。
1. 遇到问题：本人写网页款式，总是没有「高级感」
如果不给你任何组件库，让你从 0 开发一个网页，本人设计款式，你该怎么做？
你兴许遇到过这种感觉：我的网页色号都是精心筛选的，设置了某个背景色、某个装点色，但看着没有「高级感」。
举个例子
这是我之前开发的一个网页：
我设置了背景色 #fee9f5，装点色#e8e4f5（真的精心筛选了几个小时）。但感觉，很一般。
2. 寻找问题解决方案
为了失去答案，我尝试关上了 ant design。
我心愿看看它的导航栏，用了什么款式，能看起来那么有「高级感」。
还是很好找的，因为抛开“地位”相干的款式，剩下的就能够排除法失去了。答案是：box-shadow。
也就是说，给你的导航栏，加上这个款式，那么它就会看起来有「高级感」，或者称之为：「立体感」。
header {box-shadow: 0 2px 8px #f0f1f2;}3. 对于解决方案的思考：为什么加暗影后视觉体验变好了？
太阳照耀，大树会有暗影，任何 3D 物件 都会有暗影。
当然，咱们视网膜内出现的其实都是 立体图形，只是咱们在 3D 世界生存，大脑养成了这样的认知习惯：
如果看到的货色都有暗影，它很可能是个3D 物件（因为只有有高度的物品能力挡住太阳光线，造成暗影。0 高度的货色，是不会有暗影的）。
类比浏览器
咱们能够把 浏览器 当作一张纸，而咱们的网页代码能够在纸上 绘制 、或者 搁置 各种元素。
如果你是在纸上绘制了所有货色，那么它们只是一幅 立体图形。
但如果你在纸上搁置了货色，那么它将是个 3D 物件，是有 高度 的。咱们须要借助 暗影，让大脑潜意识认知到它的高度。
给导航栏加暗影，意味着导航栏高度比主体局部高，就像导航栏压在了网页上。
以此类推，咱们能够给任何货色加暗影，只有你认为，它是 搁置 在网页上，而不是 绘制 在网页上。
4. 有哪些 css 能够实现暗影款式？
暗影款式的实现不少，这里介绍 3 种罕用的，相对能笼罩日常暗影场景：
- box-shadow
- text-shadow
- filter 里的 drop-shadow
box-shadow
它是给盒子模型加暗影，即 border 那一圈的暗影，它是「容器」的暗影。至于容器外部放什么元素，不会影响它的形态。
例子：导航栏（Header）的暗影、菜单（Menu）的暗影、卡片容器（Card）、按钮（Button）的暗影。
box-shadow: offset-x offset-y blur-radius spread color inset;别离示意：程度暗影偏移、垂直暗影偏移、含糊间隔、暗影尺寸、暗影色彩、将内部暗影 (outset) 改为外部暗影。
这些其实不必刻意去记忆，当你调试好喜爱的暗影参数，保留下来，当前就用同一份，就够了。
text-shadow
它是给文本的暗影，文本是什么形态，暗影就是什么形态。
例子：非常适合给「emoji 按钮」加暗影，因为暗影会跟 emoji 长得截然不同～
text-shadow: offset-x offset-y blur-radius color;别离示意：程度暗影偏移、垂直暗影偏移、含糊间隔、暗影色彩。
filter 里的 drop-shadow
它是给图片加暗影，暗影会跟图片里不通明元素截然不同。（如果你的图片是齐全不通明的，成果相当于 box-shadow 了，这时候倡议间接用 box-shadow，性能更好）
绝对下面 2 个，它的确是用的比拟少的一种，但非凡场景下，你肯定会喜爱。
filter: drop-shadow(offset-x offset-y blur-radius color);别离示意：程度暗影偏移、垂直暗影偏移、含糊间隔、暗影色彩。
5. 加了暗影后的成果
你能够再看看文章封面图，能发现哪里有暗影吗？
我心愿每个可交互元素（次要是按钮），都是 搁置 下来的，表明按钮能够「按」，所以每个按钮都有了暗影。
文章结尾的例子
还记得文章结尾的例子吗？这是给它加了暗影后的成果，「立体感」油然而生：
具体包含这些款式：
header {box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
}
img {box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}
.text-shadow {text-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}
img:active {box-shadow: 0 4px 8px -1px rgb(0 0 0 / 20%), 0 2px 6px -2px rgb(0 0 0 / 20%);
}
.text-shadow:active {text-shadow: 0 3px 6px rgb(0 0 0 / 40%);
}header作用在导航栏上，含糊间隔大（6px），表明厚厚的导航栏放在了网页上。img作用在所有图片上，且含糊间隔小（3px），表明一张张薄薄的照片放在了网页上。如果你按下它，暗影会变更深。.text-shadow作用在导航栏的主页按钮上、导航栏右上角的✨上、动静右下角的💬上，表明这些文字都放在了网页上，并且能够点击。如果你按下它，暗影会变更深。
为什么按下后（active 态）暗影会变深？
次要是因为，我的网站次要是给挪动端用的，为了让用户造成「反差」的感觉，让用户晓得，按了哪个元素。
如果你感兴趣，我上篇文章着重介绍了这点，欢送浏览《用户体验好的 Button，在手机上不应该有 Hover 态》
倡议
😂 倡议不要滥用暗影，因为那会让网页看起来脏脏的。
你看掘金，如许洁净。只有「悬浮按钮」应用了显著的暗影，表明它具备高度。
6. 写在最初
如果你像我一样，喜爱代码 纯正 一点，不夹杂冗余性能，就能够本人写暗影款式，封装本人所需的组件 😎
如果你只是为了实现他人的需要，还是间接用组件库吧，就没这么多要操心的了。兴许组件库性能很重、体积很大，但思考全面 😁
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。