【问题标题】：Box-shadow on element with -webkit-mask-image带有 -webkit-mask-image 的元素上的框阴影
【发布时间】：2012-09-11 14:27:18
【问题描述】：

我在另一个带有-webkit-mask-image 的div 中有一个带有background-image 的div，因为在这种情况下border-radius 不能在WebKit 浏览器上工作。

如果我将 box-shadow 设置为父 div，它会显示在 Firefox 中，但不会显示在 Chrome 中。如何覆盖 -webkit-mask-image 以便我也可以使用 box-shadow？

这是一个工作示例（打开Firefox 和Chrome 中的链接以查看区别）：http://jsfiddle.net/RhT3e/3

【问题讨论】：

标签： overriding css masking

【解决方案1】：

您遇到的问题是box-shadow 被-webkit-mask-image 剪切掉，因为该选项剪切了包括box-shadow 元素在内的任何内容。

解决方案

使用蒙版图像作为蒙版图像下方显示的另一个元素，以便您可以使用其形状来渲染阴影。为了做到这一点，我们必须知道最初被遮罩的图像的宽度和高度。如果您不知道图像大小或者它是动态的，您可以使用 JavaScript。

我们面临的问题是我们不能使用box-shadow，因为它会渲染一个与遮罩形状不匹配的盒子阴影。

box-shadow 不会在形状周围呈现

相反，我们将尝试使用drop-shadow 过滤器来模拟它。

我更喜欢用相同大小的 div 包裹被遮罩的图像，并具有遮罩图像的背景图像。这就是它的样子。

HTML

<div class="image-container">
    <img class="wrap-image" src="<Original Image URL>" id="wrap-image">
</div>

CSS

.image-container {
    width: <Original Image Width>;
    height: <Original Image Width>;
    background-size: 100%;
    background-image: url(URL of Mask Image);
    -webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    -o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
}

#wrap-image {
    mask: url("URL of Mask Image");
    -webkit-mask-box-image: url("URL of Mask Image");
}

Here's a JSFiddle.

【讨论】：

【解决方案2】：

谢谢你。它真的帮助了我。我不得不补充：

mask-image: url("URL of Mask Image");
mask-size: 100%;

让它在 Edge 中正确呈现。

【讨论】：