Internet Explorer 용 필터 드롭 섀도우

Question

IE 이외의 브라우저에서 잘 작동하는 곡선 PNG에 드롭 섀도우 필터를 사용하고 있습니다.

는

체크 아웃 여기에 상자 : https://www.yogidia.com/builder가 (세 개의 상자 바로 '요가 시퀀스 빌더 3 1 :'아래) 다음

내 코드는 :

.curved::after { 
    content: ""; 
    -webkit-filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12)); 
    filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12)); 
    width: 100%; 
    display: inline-block; 
    height: 40px; 
    position: absolute; 
    bottom: -39px; 
    left: 0; 
} 

내가 같은 효과를 재현에 도움이 필요합니다 progid입니다 : DXImageTransform.Microsoft.Shadow 및 필터 : progid입니다 : DXImageTransform.Microsoft.DropShadow하지만 witho Thnx

참고

사전에 IE 에서 나는 필터를 시도했다 성공 :/

Answer 1

box-shadow을 사용하지 않으시겠습니까? 예를 들어 원을 사용 :

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    background-color: #3f0; 
 
    box-shadow: 0px 5px 5px #888888; 
 
}

<div class="circle"><div>

그리고 당신의 예에서, 바닥 이미지를 사용하는 것은 정말 갈 수있는 가장 좋은 방법이 아니다, 만약에하는 것은 폭의 변화가? 그것은 매우 반응이 아니에요, 난 당신이 사용하는 것이 좋을 걸 :

이

body { 
 
    background-color: #ccc; 
 
} 
 

 
#box { 
 
    position: relative; 
 
    height: 250px; 
 
    width: 150px; 
 
    background-color: white; 
 
    margin: 50px; 
 
    z-index: 2; 
 
} 
 

 
#box::after { 
 
    position: absolute; 
 
    z-index: 3; 
 
    content: ""; 
 
    width: 150px; 
 
    height: 30px; 
 
    background-color: white; 
 
    bottom: -30px; 
 
    border-radius: 00px 0px 50% 50%; 
 
    border-top: 5px solid white; 
 
    box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.2); 
 
}

<div id="box"></div>