简约质感css框（box-shadow的真正使用方法）

先附上效果图和相应的代码

配色来源：aicolors.co

代码（vue2)

<template>
  <div id="app">
   <div class="father">
    <div class="son"></div>
   </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
   
  }
}
</script>

<style>
.father{
  height: 800px;
  width: 100%;
  background-color: #93a8b3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width:  300px;
  height: 300px;
  background-color: #B0C5D1;
  border-radius: 50px;
  box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.3),
              inset 10px 10px 10px rgba(255, 255, 255, 0.5),
              -15px -15px 35px rgba(255, 255, 255, 0.55),
              inset -1px -1px 10px rgba(0, 0, 0, 0.3);
}
</style>

再详细说一说box-shadow这个属性

细看这个代码其实是一个很简单的阴影的一个描绘 相信大家都记不住box-shadow的各个属性的含义

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

对照着这个表我们来理清楚代码

从这个普通的圆角开始看 这就是一个平平无奇的居中和圆角

.father{
  height: 800px;
  width: 100%;
  background-color: #93a8b3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width:  300px;
  height: 300px;
  background-color: #B0C5D1;
  border-radius: 50px;
}

分开细看这个效果图是头上一部分白色阴影和脚上一部分黑色阴影

也就是说

即可实现 我们看看效果如何

好像不太对劲

内部阴影也是一个核心的立体感的体系 我们给上边描绘一层白色的阴影 下面描绘一层黑色的阴影就完成啦0.0

具体原理呢可能还是需要请教一些绘画专业的朋友啦0.0