Question

我试图在带圆角的div的所有边缘上获得平滑渐变。

Here's a JSfiddle of what I have so far.

HTML：

<div id=container>
  <div id="test">
  </div>
</div>

CSS：

#container {
  padding-top:150px;
  height: 350px;
  background-color: black;
}

#test {
  width: 200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
  background-color: rgba(247, 250, 252, 0.8);
  box-shadow: 0 0 100px 100px rgba(247, 250, 252, 0.8);
  border-radius: 20px;
}

在Chrome浏览器（54.0.2840.71米）中，它看起来基本上与我想要的一样，但圆角（here is an image of what it looks like for me, the color banding is just from the image compression）上有文物。在Firefox中，阴影和div的颜色不完全匹配在边缘，并且工件仍然存在，而在Edge中颜色匹配但是工件更糟。

有没有办法摆脱这些工件，或者是一种不同的（简单）方法来获得类似的效果？我并不关心旧浏览器，即使它只适用于Chrome，也会很开心。

Answer 1

我找到了一种方法来至少隐藏工件：将filter: blur(5px)（必要的数量似乎取决于div的大小）添加到带有阴影和圆角的div。因为目标是模糊的边缘，这看起来很完美。它适用于当前版本的Chrome，Edge和Firefox（模糊甚至会模糊Firefox中的颜色不匹配）。

模糊处理所有子元素，因此我们需要一个单独的div来提供背景颜色，阴影和模糊。主要获得background-color: transparent，因此背景不会重叠。模糊的div与position:absolute的主要部分完全重叠，并且给出较低的z-index，因此它不会阻碍内容。

Here's a jsfiddle showing the solution.

HTML：

<div id=container>
  <div id="test">
    <div id="blur">
    </div>
    test
  </div>
</div>

CSS：

#container {
  z-index:-100;
  height: 500px;
  width: 500px;
  background-color: black;
}

#test {
  z-index:1;
  position: relative;
  top: 150px;
  width: 200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
  background-color: transparent;
}
#blur {
  z-index: -10;
  width: 200px;
  height:200px;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color: rgba(247, 250, 252, 0.8);
  box-shadow: 0 0 100px 100px rgba(247, 250, 252, 0.8);
  border-radius: 20px;
  filter: blur(5px);
}

here is the site我需要这个，我觉得这对程序员的艺术看起来很不错。

Answer 2

我非常喜欢你的工作，稍微改进了一点:) code

https://jsfiddle.net/wrd2b1xr/5/

将div的边缘与圆角混合

2 个答案: