如何刪除徑向漸變中的邊框，使其可以很好地混合？

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

密碼筆

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