Изображение отражение не должно быть тень

Question

Мое изображение имеет отражение и тень (с помощью этого css). Проблема в том, что тень должна быть только на исходном изображении ... Теперь исходное изображение И отражение имеют тень ... (он также отражает тень).

(это не скриншот iPhone, его просто, что изображение на моей странице)

Что я должен изменить?

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

Thx

Эверт

пс. Только WebKit будет в порядке, он предназначен для WebKit ..

Answer 1

Есть два способа решить эту проблему:

1) первый один является обертыванием изображения в другой DIV и дает тень на эти дела.
так:

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

вы можете применить тень прямо из .box и дать коробку, отражают только в .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, как предложено matthias.p

2) Второй способ - применить изображение -webkit-box-mask-image к вашему отражению, конечно, если вы хотите создать маску .png.

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

вы можете прочитать больше о CSS масок свойств here