CSS是网页设计中必不可少的一部分，起到美化网页的作用。而在CSS的实际应用中，鼠标移上边框加颜色的效果也是非常常见的，下面我们来学习一下如何实现这个效果。

.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中设置我们要添加效果的元素class，这里我们设置为“box”。为了使效果更加明显，我们给这个容器设定了一个1px的灰色边框。同时，我们还设置了文本居中和垂直居中的样式。

接着，在:hover伪类中，我们添加了两个属性来改变box容器在鼠标移上去的样式。也就是当鼠标移动到这个容器上的时候，会将容器的上边框和下边框改变为6px的宽度，并将颜色设置为#0078d7。

然后，我们需要在HTML文件中，给想要加效果的元素指定这个class。比如在这里我们可以在一个div标签中加入这个class：

<div class="box">
鼠标移上来试试
</div>

最后，我们在浏览器中打开这个页面，当鼠标移动到.box元素上时，我们可以看到 box容器的上边框和下边框被改变为6px的宽度，并且颜色被设置为了#0078d7，这就是鼠标移上边框加颜色的效果。

总之，我们可以通过设置:hover伪类和改变元素的某些属性，从而实现各种不同的效果，这个小技巧能让我们的网站更加生动、有趣、美观。