CSS를 사용하여 Tic-Tac-Toe UI와 같은 3x3 메쉬의 외부 경계를 제거하는 방법

Tic-tac-toe 게임을 실현하려고 시도했을 때, 나는 이러한 사용자 인터페이스를 실현하려고 시도했다. (나는 일부 XD에 있어서 이것은 보기에 매우 쉽다는 것을 안다.)
도전은 첫 번째 열과 마지막 열, 그리고 첫 번째 줄과 마지막 줄을 어떻게 정확하게 선택하는가이다.나는 정말 여덟 개의 단원의 경계를 수동으로 제거하고 싶지 않다.
나의tic-tac-toe 격자 데이터 구조는 2차원이 아니라 1차원이기 때문에 나는 아래의 기교를 쉽게 완성할 수 있다.나의 계수를 이렇게 상상해 보자.
0 | 1 | 2
3 | 4 | 5
6 | 7 | 8
첫 번째 행의 경우 위쪽 테두리를 삭제해야 합니다.

.board-item:nth-child(-n + 3) {
    border-top: none;
} 

마지막 칼럼에서

.board div:nth-child(3n) {
    border-right: none;
}

제1란,

.board-item:nth-child(3n  - 2) {
    border-left: none;
} 

마지막 줄,

.board-item:nth-child(n + 7) {
    border-bottom: none;
}

이렇게읽어주셔서 감사합니다.나의tic-tac-toe 게임을 보세요.