background-position: 0 0, 0 0;
outline: 1px solid #000;
outline-offset: 5px;
}
这样,一个架子就差不多了:
当然,棋盘中间的一行...calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘上方的虚线...calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘下方的虚线...calc(50% + 0.5px),
transparent calc(50% + 0.5px),
transparent 0),
// 棋盘下方的虚线...,这样,我们的棋盘就变成了这样:
借助伪元素及 box-shadow 实现剩余符合
到这里,我们仅仅使用了元素本身,要知道,我们还有元素的两个伪元素没使用。