将div的边缘与圆角混合

Question

I'm trying to get a smooth gradient on all edges of a div with rounded corners.

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

In Chrome (54.0.2840.71 m) it looks basically like what I want, but there are artifacts at the rounded corners ( here is an image of what it looks like for me, the color banding is just from the image compression ). In Firefox the color of the shadow and div don't match up exactly at the edge and the artifacts are still there, and in Edge the colors match but the artifacts are worse.

Is there some way to get rid of these artifacts, or a different (simple) method to get a similar effect? I don't care about older browsers and would be happy even if it only works in chrome.

Answer 1

I figured out a way to at least hide the artifacts: Adding a filter: blur(5px) (the necessary amount seems to depend on the size of the div) to the div with the box-shadow and rounded corners. Because the goal is a blurred edge anyway this looks perfect. It works in current versions of Chrome, Edge and Firefox (the blur even smears out the color mismatch in Firefox).

The blur acts on all child elements so we need a separate div that provides the background color, shadow and blur. The main one gets background-color: transparent so the backgrounds don't overlap. The blurred div is positioned exactly overlapping the main one with position:absolute and given a lower z-index so it doesn't obstruct the content.

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

And here is the site I needed this for, I think it looks pretty good for programmer art.

Answer 2

I pretty like your work, improved it a little :) code

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