1.实现效果
2.实现步骤
:root {--w: 30px;
}
- 父容器为一个圆角正方形,添加box-shadow阴影,设置transform-style: preserve-3d,让转换的子元素保留3D转换
<div class="container"></container>
.container { height: 150px; width: 150px; padding: 30px; box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2); border-radius: 15px; transform-style: preserve-3d;
}
- 父元素设置box-sizing: border-box* 在此容器内,添加9个正方形并设置transform-style: preserve-3d,长/宽为w,按照这样的布局,改写父容器的大小,正方形平均分布,父元素设置flex横向布局,超出换行
![](https://i-blog.csdnimg.cn/blog_migrate/ffcb5b65cf9cf9cacfa7b091cdbe2896.png)
<div class="container"><div class="square"></div> ...// 共9个<div class="square"></div></div>
.container {
- height: 150px;
- width: 150px;
- padding: 30px;
- border-radius: 15px;
+ height: calc(var(--w) * 5);
+ width: calc(var(--w) * 5);
+ padding: var(--w);
+ border-radius: calc(var(--w) / 2);
+ displa