在CSS中，我们可以通过伪类来实现框的效果。伪类是一种特殊的选择器，它能够选择元素的特殊状态，比如说hover状态、active状态等等。

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

上面的代码对一个名为“box”的元素设置了边框，当鼠标悬停在该元素上时，边框颜色会变成深灰色。这就是通过:hover伪类实现的效果。

除了:hover之外，还有其他一些常见的伪类可以用来制作框的效果。

• :active：当一个元素被激活时（比如说鼠标按下并松开），该元素会处于active状态。
• :focus：当一个元素被选中时，该元素会处于focus状态（比如说文本框被选中）。
• :first-child：选择某个元素的第一个子元素。
• :last-child：选择某个元素的最后一个子元素。

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

上面的代码对一个名为“box”的元素的子元素设置了边框，第一个子元素的顶部边框会被去掉，最后一个子元素的底部边框会被去掉。这就是通过:first-child和:last-child伪类实现的效果。

通过合理地运用伪类，我们可以制作出各种各样的框的效果，使页面更加美观。