帶框陰影的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>