结构图解析：
后记
12321
.test-box{
display:flex;
flex-direction: row;
flex-wrap: wrap;
.test-item{
flex:0 0 33.33%;
position: relative;
&::before{
content: ' ';
display:block;
padding-bottom:100%;
}
&:after{
content: ' ';
transform-origin: center;
box-sizing: border-box;
position: absolute;
top:-50%;
left:-50%;
right:-50%;
bottom:-50%;
border-color: #c8c7cc;
border-style: solid;
border-width: 1px;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
border-top-width: 0;
border-left-width: 0;
}
}
.test-content{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
html九宫格挖正方形代码 使用css伪类before/after实现 正方形三宫格 正方形六宫格 正方形九宫格...
