CSS是網(wǎng)頁設(shè)計(jì)中必不可少的一部分，起到美化網(wǎng)頁的作用。而在CSS的實(shí)際應(yīng)用中，鼠標(biāo)移上邊框加顏色的效果也是非常常見的，下面我們來學(xué)習(xí)一下如何實(shí)現(xiàn)這個效果。

.box {
width: 200px;
height：200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
}
.box:hover {
border-top: 6px solid #0078d7;
border-bottom: 6px solid #0078d7;
}

首先，我們需要在CSS中設(shè)置我們要添加效果的元素class，這里我們設(shè)置為“box”。為了使效果更加明顯，我們給這個容器設(shè)定了一個1px的灰色邊框。同時(shí)，我們還設(shè)置了文本居中和垂直居中的樣式。

接著，在:hover偽類中，我們添加了兩個屬性來改變box容器在鼠標(biāo)移上去的樣式。也就是當(dāng)鼠標(biāo)移動到這個容器上的時(shí)候，會將容器的上邊框和下邊框改變?yōu)?px的寬度，并將顏色設(shè)置為#0078d7。

然后，我們需要在HTML文件中，給想要加效果的元素指定這個class。比如在這里我們可以在一個div標(biāo)簽中加入這個class：

<div class="box">
鼠標(biāo)移上來試試
</div>

最后，我們在瀏覽器中打開這個頁面，當(dāng)鼠標(biāo)移動到.box元素上時(shí)，我們可以看到 box容器的上邊框和下邊框被改變?yōu)?px的寬度，并且顏色被設(shè)置為了#0078d7，這就是鼠標(biāo)移上邊框加顏色的效果。

總之，我們可以通過設(shè)置:hover偽類和改變元素的某些屬性，從而實(shí)現(xiàn)各種不同的效果，這個小技巧能讓我們的網(wǎng)站更加生動、有趣、美觀。