2

我的图像有反射和阴影（通过使用这个 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;

谢谢

翻转

附言。只有 webkit 没问题，它是为 webkit 设计的..

4

1 回答 1

3

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

1）第一个是将图像包装在另一个 div 中并将阴影赋予该 div。
像这样：

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

您可以将阴影直接应用到 .box 中，并将 box-reflect 仅赋予 .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;
}

你可以在这里看到一个工作示例

*注意 -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 掩码属性的更多信息

于 2013-04-06T01:41:18.027 回答