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 m)은 기본적으로 내가 원하는처럼 보이지만 유물은 둥근에서 거기에서

#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입니다.

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

나는 꽤 당신의 일처럼, 그것에게 좋은 애니메이션/인 flexbox 트릭에 대한 약간의 : code

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