Javascript 迷你边界调整点游戏

我正在尝试开发一个迷你游戏，在这个游戏中，你点击圆点，位置将被随机生成，点击越多，圆点的大小将缩小。边框也可以根据其设备进行扩展

关于如何在不越界的情况下在边界内缩放点，有何建议/想法

以下是我的简单代码：

.Box{
位置：相对位置；
框大小：边框框；
边框：1px纯黑；
高度：700px；
宽度：自动；
利润率：2%；
填充：0px；
}
多特先生{
位置：绝对位置；
背景色：红色；
边界半径：50%；
宽度：20px；
高度：50px；
左：5px；
最高：96%；
}

---

如果圆点的高度和宽度为50像素，则可以在主框周围放置一半大小的填充物，在这种情况下，填充物的大小将为25像素

然后可以在框内添加另一个div，该div将是框的高度和宽度的100%，将其位置设置为相对位置，并使点在内部容器内移动

只要始终保持圆点的大小和框的填充为圆点大小的一半，圆点就永远不会溢出其父容器

*，*：：之前，*：：之后{
框大小：边框框；
}
.盒子{
边框：1px纯黑；
高度：700px；
宽度：自动；
利润率：2%；
填充：25px；
}
.内部{
位置：相对位置；
身高：100%；
宽度：100%；
}
多特先生{
位置：绝对位置；
背景色：红色；
边界半径：50%；
宽度：50px；
高度：50px；
左：5px；
最高：96%；
}

谢谢。这会有用的。如果你不介意我问的话。什么是

*，*：：before，*：：after{box size:border box；}

for？

*

表示通配符，当您在该块中编写css规则时，它们将应用于html中的所有元素。因此，上面将把

框大小：边框框

应用于所有元素及其前/

后的

伪元素