如果我們想要在網頁中呈現一個田字圖形怎么辦？CSS中可以使用偽類和偽元素來實現這個目標。以下是一個示例：

.tianzi {
width: 100px;
height: 100px;
position: relative;
}
.tianzi:before,
.tianzi:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 2px;
background-color: #000;
}
.tianzi:before {
left: 0;
transform: rotate(90deg);
}
.tianzi:after {
right: 0;
transform: rotate(-90deg);
}

在上述代碼中，我們使用了一個名為.tianzi的CSS類來定義田字方塊。該元素的寬度和高度都為100像素，并且被設置為相對定位。我們使用偽類:before和:after來創建田字方塊的橫線和豎線。這兩個偽類都被設置為絕對定位，并且被定位至最上端和最下端的中間。我們使用 margin: auto; 來將這些線條居中。這樣做的前提是，我們首先要在父級元素中設置一個固定的高度。

通過使用 transform: rotate()，我們可以讓偽類轉動90度或-90度，從而呈現出橫向或縱向的線條。最后，我們使用 background-color 屬性來定義田字邊框的顏色。

在上述代碼中，我們并沒有為田字方塊添加邊框。這是因為多個元素之間的邊框會疊加在一起，導致田字方塊的線條顯示出來更為粗大。如果你非要添加邊框，可以使用 box-shadow 和 text-shadow 屬性來模擬邊框效果。