鼠标在父元素内移动，子元素跟随鼠标移动，且子元素不能超出父元素边框

你可以通过监听父元素的mousemove事件，获取鼠标在父元素内的位置，然后设置子元素的位置来实现子元素跟随鼠标移动的效果。同时，可以通过判断子元素的位置是否超出父元素边界来限制子元素不能超出父元素边框。以下是一个示例代码：

HTML：

<div class="parent">
  <div class="child"></div>
</div>

CSS：

.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 50%;
}

JavaScript：

var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mousemove', function(e) {
  var x = e.clientX - parent.offsetLeft;
  var y = e.clientY - parent.offsetTop;
  x = Math.min(x, parent.clientWidth - child.clientWidth);
  y = Math.min(y, parent.clientHeight - child.clientHeight);
  x = Math.max(x, 0);
  y = Math.max(y, 0);
  child.style.left = x + 'px';
  child.style.top = y + 'px';
});

在上述代码中，我们通过获取鼠标在父元素内的位置，并且限制子元素的位置不超出父元素边界，从而实现了子元素跟随鼠标移动的效果，同时子元素不能超出父元素边框。