在CSS中，我們可以通過偽類來(lái)實(shí)現(xiàn)框的效果。偽類是一種特殊的選擇器，它能夠選擇元素的特殊狀態(tài)，比如說hover狀態(tài)、active狀態(tài)等等。

.box {
border: 1px solid #ccc;
}
.box:hover {
border: 1px solid #333;
}

上面的代碼對(duì)一個(gè)名為“box”的元素設(shè)置了邊框，當(dāng)鼠標(biāo)懸停在該元素上時(shí)，邊框顏色會(huì)變成深灰色。這就是通過:hover偽類實(shí)現(xiàn)的效果。

除了:hover之外，還有其他一些常見的偽類可以用來(lái)制作框的效果。

• :active：當(dāng)一個(gè)元素被激活時(shí)（比如說鼠標(biāo)按下并松開），該元素會(huì)處于active狀態(tài)。
• :focus：當(dāng)一個(gè)元素被選中時(shí)，該元素會(huì)處于focus狀態(tài)（比如說文本框被選中）。
• :first-child：選擇某個(gè)元素的第一個(gè)子元素。
• :last-child：選擇某個(gè)元素的最后一個(gè)子元素。

.box {
border: 1px solid #ccc;
}
.box:first-child {
border-top: none;
}
.box:last-child {
border-bottom: none;
}

上面的代碼對(duì)一個(gè)名為“box”的元素的子元素設(shè)置了邊框，第一個(gè)子元素的頂部邊框會(huì)被去掉，最后一個(gè)子元素的底部邊框會(huì)被去掉。這就是通過:first-child和:last-child偽類實(shí)現(xiàn)的效果。

通過合理地運(yùn)用偽類，我們可以制作出各種各樣的框的效果，使頁(yè)面更加美觀。