如何去除径向渐变的边框，以便它能很好地混合？

Question

我有径向渐变如下：

如何移除最终的暗边框以使其与背景混合？

（皱纹没问题，但最后的边界线很烦人）

基本上我试图在普通背景中间有一个发光元素。 任何替代方案也欢迎：）

CSS

#rectangle {
  position: relative;
  width: 1280px;
  height: 480px;
  background-color: #112d44;
}
#rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  bottom : 0%;
  right: 0;
  left: -10%;
  width:1680px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgb(17, 67, 96) 0%, rgba(0, 0, 0, 0) 50%);
}

HTML

<div id="rectangle" ></div>

笔可以在这里找到：http://codepen.io/anon/pen/vNOLGx请先拨叉。

Answer 1

让渐变渐变为背景颜色，并隐藏任何溢出，以使::after伪元素不会从其容器中突破：

#rectangle {
  position: relative;
  width: 1280px;
  height: 480px;
  background-color: #112d44;
  overflow: hidden;
}
#rectangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 30%;
  bottom : 0%;
  right: 0;
  left: 0%;
  width:1680px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgb(17, 67, 96) 0%, rgb(17, 45, 68) 50%);
}

CodePen

Answer 2

如果您使用更多颜色，透明度和“最近侧”，我认为它看起来很流畅：

background:radial-gradient(ellipse closest-side, 
rgba(35, 80, 117, 0.27) 10%, 
rgba(25, 61, 90, 0.46) 25%, 
rgba(17, 45, 68, 0.66) 30%, 
rgba(17, 45, 68, 0.85) 10%, 
transparent 40%)

我希望这是你需要的。 http://codepen.io/anon/pen/qOdZxY