javascript - 带有框阴影的 Css 剪辑图像不起作用

Question

我正在尝试剪辑 图像。此图像具有 box-shadow 属性。

我想要的是对图像应用 clip 但我想保留 box-shadow，不是对原始图像而是对 clip 图片。

我该怎么做？

遵循我的 HTML/CSS3 代码:

img {
  position: absolute;
  width: 500px;
  height 100px;
  top: 10px;
  left: 10px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
  clip: rect(0px, 500px, 500px, 0px);
  transition: all 1s;
}

#image {
  position: relative;
}
#image:hover img {
  clip: rect(0px, 50px, 50px, 0px);
}

<div id="image">
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>

注意:我想避免使用 javascript 或 jquery 来解决这个问题。但是当然，如​​果没有其他解决方案并且需要 javascript/jquery 代码，我会使用它。

[编辑]

我希望原始图像和最终图像具有框阴影，并且框阴影可以像剪辑一样动画。

Answer 1

这是我的解决方案，不需要剪辑。

#image {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 500px;
  height: 100px; background:url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
  transition: all 1s;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 1);
}

#image:hover {
  width: 50px;
  height: 50px;
}

<div id="image">

</div>