html - 如何去除径向渐变中的边框，使其能够很好地混合？

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请先 fork 。

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