html - 在极端的盒子阴影效果后面暴露的硬线/盒子？

Question

如何消除这种效果，使它只是一个干净的盒子阴影发光？

https://jsfiddle.net/stu9qjLp/2/

代码：

#test {
    border: 1px solid red;
    border-radius: 1px;
    width: 1px;
    height: 1px;
    box-shadow: 0 0 250px 125px red;
}

Answer 1

也许是径向渐变？

body {
  margin: 0;
  height: 100vh;
  background: #000;
}

body::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse at center top, red, black 50%, black);
}