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);
}