divの端を丸みのあるコーナーでブレンドする

Question

丸い角を持つdivのすべてのエッジで滑らかなグラデーションを得ようとしています。

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

HTML：

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

CSS：

クローム（54.0.2840.71メートル）それは基本的に私が欲しいもののように見えますが、アーティファクトが丸いであるに

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

コーナー（here is an image of what it looks like for me, the color banding is just from the image compression）。 Firefoxでは、シャドウとdivの色が端に正確に一致せず、アーティファクトがまだ残っています。エッジでは色は一致しますが、アーティファクトは悪化します。

これらのアーチファクトを取り除く方法はありますか、それとも類似の効果を得るための別の（簡単な）方法がありますか？私は古いブラウザを気にせず、クロームでしか動作していても満足しています。

Answer 1

filter: blur(5px)（必要な量はdivのサイズに依存するようです）をボックス影と丸い角でdivに追加する方法を考えました。とにかく、目標はぼやけたエッジなので完璧に見えます。現在のバージョンのChrome、Edge、Firefoxで動作します（ぼかしはFirefoxの色の不一致をまねします）。

ぼかしはすべての子要素に作用するので、背景色、影、およびぼかしを提供する個別のdivが必要です。主なものはbackground-color: transparentとなり、背景が重ならないようにします。ぼやけたdivは、メインのものと正確に重複して配置され、position:absoluteと低く、z-indexと与えられているため、内容が妨げられません。

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/