带框阴影的CSS剪辑图像不起作用

Question

我正在尝试clip图像。 该图像具有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>