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实现，显然我要通过计算来区分first、bottom、和不加这三种情况，总感觉很蹩脚，

而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 是绘制右侧和上侧的边框，他们占据当前单元格自身的位置

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

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