当前位置: 首页 > Web前端 > CSS

使用css伪类before-after实现正方形三格,正方形六格,正方形九格

时间:2023-03-30 14:21:41 CSS

结构图解析:后记12321.test-box{显示:flex;弹性方向:行;弹性包装:包装;.test-item{flex:0033.33%;位置:相对;&::before{内容:'';显示:块;底边距:100%;}&:after{内容:'';变换原点:中心;框大小:边框框;位置:绝对;顶部:-50%;左:-50%;右:-50%;底部:-50%;边框颜色:#c8c7cc;边框样式:实心;边框宽度:1px;-webkit-转换:规模(.5);-ms-转换:比例(.5);变换:比例(.5);边框顶部宽度:0;左边框宽度:0;}}.test-content{位置:绝对;左:0;顶部:0;宽度:100%;高度:100%;显示:弹性;弹性方向:列;证明内容:居中;对齐项目:居中;}}