css制作跟随鼠标移动的小黑框

可以使用CSS的`position`属性和`transform`属性来实现一个跟随鼠标移动的小黑框。具体实现步骤如下：

1. 在HTML中创建一个`div`元素，并为其添加一个唯一的`id`属性，例如`box`。

2. 在CSS中为该`div`元素设置样式，包括宽度、高度、背景色、边框等。

3. 使用`position: absolute`将`div`元素的位置固定在页面上，并将其位置设置为页面的左上角，即`top: 0; left: 0;`。

4. 使用`transform: translate(-50%, -50%)`将`div`元素向左上角偏移自身宽度和高度的一半，使其初始位置位于页面中心。

5. 使用JavaScript监听鼠标移动事件，并获取鼠标的坐标。

6. 将`div`元素的位置设置为鼠标的坐标，同时使用`transform: translate(-50%, -50%)`将其向左上角偏移自身宽度和高度的一半，使其始终处于鼠标下方。

以下是完整的代码示例：

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 50px;
  height: 50px;
  background-color: black;
  border: 1px solid gray;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

JavaScript代码：

var box = document.getElementById("box");
document.addEventListener("mousemove", function(event) {
  var x = event.clientX;
  var y = event.clientY;
  box.style.top = y + "px";
  box.style.left = x + "px";
  box.style.transform = "translate(-50%, -50%)";
});