最近浏览网站，发现一个好玩的，整体风格都是拟态化的，一下子激起了我的学习能力和挑战性，拟态化效果归根到底还是投影shadow的妙用。当然还是需要会用CSS的box-shadow属性，不是随便设置个值就可以实现的。先来回顾一下投影如何使用。
CSS投影shadow闪现到当前流行拟态化效果，那些基础被忽视的样式！-QUI-Notes

基础知识

box-shadow 属性可以设置一个或多个下拉阴影的框。

box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow 必需的。水平阴影的位置。允许负值
  • v-shadow 必需的。垂直阴影的位置。允许负值
  • blur 可选。模糊距离
  • spread 可选。阴影的大小
  • color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
  • inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

另外，inset，不要忘记，这个玩意可以实现内阴影效果，是实现拟态化的大坑之一。

浅谈拟态化

最初还是19年在dribbble上看到过移动UI设计作品中看到过，第一眼就给人一种独特的冲击感，就好比喝了一辈子的矿泉水，突然来了一口红牛。卧槽，还有这样的设计风格——拟态化。

拟态化，模拟一个物体的形态，有点类似于拟物化和扁平化的结合体。整体风格：干净，简约，美观，视觉冲击感强。缺点：不突出，易疲劳。

拟态化效果特点：

  • 1.整体呈现”凹凸“效果
  • 2.元素背景色和整体背景色一致，或元素无背景色；
  • 3.元素四周携带投影；
  • 4.元素投影分浅色投影和暗色投影，投影色趋近于背景色；

效果预览地址

https://course.51qux.com/effect/box-shadow

代码实现：

.card{width: 200px;height: 200px;border-radius: 30px;box-sizing: border-box;}
.shadow{box-shadow: 15px 15px 25px rgb(165 165 165 / 20%), -15px -15px 25px rgb(223 223 223 / 50%);}
.shadow:hover{box-shadow:inset 15px 15px 25px rgb(183 183 183 / 20%),inset -15px -15px 25px rgb(211 211 211 / 50%);}

如下，就实现了一个简单拟态化效果。
CSS投影shadow闪现到当前流行拟态化效果，那些基础被忽视的样式！-QUI-Notes

复制几个，换个底色。修改一下投影颜色就得到了一组如下的拟态效果：
CSS投影shadow闪现到当前流行拟态化效果，那些基础被忽视的样式！-QUI-Notes

当然也可以使用渐变背景。效果如下：
CSS投影shadow闪现到当前流行拟态化效果，那些基础被忽视的样式！-QUI-Notes

拟态虽好，也属流行，很容易过时，可能一段时间内看着美感和独特性强，审美疲劳之后就觉得很low，和拟物化一下，可能这种风格转个圈又变成了流行。好了，以上就是个人对拟态化的理解。