图像反射不应该有阴影

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

埃弗特

PS。只有webkit没问题，它是专为webkit设计的..

Answer 1

有两种方法可以解决这个问题：

1）第一个是将图像包装在另一个div中并将阴影赋予该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-gradient，您应该使用matthias.p建议的-webkit-linear-gradient

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 mask properties here

的更多信息