이미지 반사에는 그림자가 없어야합니다.

Question

내 이미지에 반사 및 그림자가 있습니다 (이 CSS 사용). 문제는 다음과 같습니다. 그림자는 원본 이미지에만 있어야합니다 ... 이제 원본 이미지와 반사에는 그림자가 있습니다 (그림자도 반영됩니다).

어떻게 편집해야합니다 (이 내 페이지의 바로 그 이미지는 아이폰의 스크린 샷되지 않습니다)?

-webkit-box-reflect: below 2px 
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(white)); 
    box-shadow: 0px 2px 2px 0px; 

들으

에버트

추신.

1) 첫 번째는 다른 사업부에서 이미지를 배치하고이 사업부에 그림자를 제공하는 것입니다 : 만 웹킷,이 문제를 해결하는 방법은 두 가지가 있습니다

Answer 1

.. 웹킷을 위해 괜찮 설계되어있다. 이 같은
: 당신이 바로 .box에서 그림자를 적용하고 제공 할 수 있습니다

<div class="shadow"> 
    <div class="box"></div> 
</div> 

.box에만 상자가-반영합니다.

.box{ 
    width:100px; 
    height:100px; 
    border-radius:10px; 
    background:url(../your_image.xxx) no-repeat center; 
    -webkit-box-reflect: below 2px 
    /* DEPRECATED -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(white))*/ 
    -webkit-linear-gradient(top, transparent 0%,transparent 70% ,white 100%); 
} 
.shadow{ 
    width:100px; 
    border-radius:10px; 
    box-shadow: 0px 2px 2px 0px; 
} 

당신이 here

* 그 -webkit-그라데이션이되지 않습니다 참고, 당신은 -webkit-선형을 사용해야 작업 예제를 볼 수 있습니다
는 다음과 같이 (난 데모 용으로 만 이상의 속성을 추가) -gradient by matthias.p

2) 두 번째 방법은 .png 마스크를 만들려는 경우 반사에 -webkit-box-mask-image를 적용하는 것입니다.

.box{ 
/*...other properties here...*/ 
-webkit-box-reflect: below 2px 
-webkit-mask-box-image: url(mask.png) 75 stretch; 
} 

당신은 here