CSS鼠标移动上去有黑框是一种常见的设计效果，可以提升网页的用户体验和页面美感。这种效果可以通过CSS代码来实现，具体方法如下。

/* HTML部分 */ 
<div class="box">
<img src="图片地址" alt="图片描述">
</div>
/* CSS部分 */ 
.box {
position: relative;
display: inline-block;
}
.box:hover::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
border: 1px solid black; /* 黑色边框 */
}
/* :hover 为鼠标移动到元素上时的伪类选择器，::before 是在元素前方添加内容的伪元素 */

在上面的代码中，我们首先给包裹图片的容器设置了相对定位和内联块级元素的display属性，以保证图片和边框的相对位置不会变化。然后，在容器元素的:hover状态下，通过::before伪元素在容器前面添加了一个空白的方块，通过border属性给方块添加了一个黑色的边框。

需要注意的是，为了让黑框和图片有一定的间隙，我们在给黑框定位时通过top、left、bottom、right属性分别设置了5px的外边距。

综上所述，通过利用CSS的伪元素和 :hover 选择器，我们可以很方便地为网页中的图片、按钮等元素添加动态边框效果，实现出更美观的页面效果。