border-radius:50%不生效问题求助 | CSS/HTML/JS

API 探路者

2026-7-28

解决border-radius:50%不生效的圆形跟随鼠标问题

你遇到的问题核心是元素宽高不相等，导致border-radius:50%无法渲染成正圆形。看你的CSS代码，重复写了两次width:6px，但完全没设置height属性，div的高度默认由内容（这里是1px的font-size）决定，宽高差异极大，自然出不来圆形效果。

修正后的完整代码：

JavaScript

let inner_circle = document.getElementById("inner_circle");

window.addEventListener("mousemove", function(mouse) {
  // 用translate(-50%, -50%)让圆形圆心对准鼠标，替代负margin的偏移方式
  inner_circle.style.transform = `translate(${mouse.clientX}px, ${mouse.clientY}px) translate(-50%, -50%)`;
});

CSS

#inner_circle{
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid #703be7;
    border-radius: 50%;
    font-size: 0; /* 彻底消除内容高度影响 */
    background-color: #703be7;
    width: 6px;
    height: 6px; /* 新增高度，保证宽高相等 */
    z-index: 1000001;
    pointer-events: none;
}