box-shadow 实现网格的边框

ant的Card能实现下面的效果

主要是网格的边框,在没使用之前我的构思是这样的

         <div className="item first">
                1
            </div>  
           <div className="item">
             1
            </div>
            <div className="item bottom">
              <div className="hover-block">品牌</div>
            </div>

我计划用border实现,显然我要通过计算来区分firstbottom、和不加这三种情况,总感觉很蹩脚,

Card组件给每个格子加了box-shadow属性

1px 0 0 0 #f0f0f0, 
0 1px 0 0 #f0f0f0, 
1px 1px 0 0 #f0f0f0, 
inset 1px 0 0 0 #f0f0f0, 
inset 0 1px 0 0 #f0f0f0

和并一下就是

1px 1px0 0 0 #f0f0f0, 
inset 1px 1px 0 0 #f0f0f0, 

你可能想到和box-shadow 不计算在宽高内有关,
然而换成outline是这样的

image.png

1px 1px0 0 0 #f0f0f0 绘制的是右侧、下册的边框,增大属性

image.png

实际上左单元格的右侧边框占据了右单元格的宽度

inset 1px 1px 0 0 #f0f0f0 是绘制右侧和上侧的边框,他们占据当前单元格自身的位置

总上所述,在交界出两个单元格的边框重叠了,秒啊!

果真,做效果这件事不能用常规的逻辑思维去衡量,可能会被累死。