2
我注意到使用剪輯屬性也會刪除box-shadow屬性。有兩種方法可以在同一個元素上使用嗎?有沒有辦法使剪輯屬性與box-shadow屬性一起使用?
一些背景:我有三列三種類型的產品。每個產品都有一個圖像,每個圖像的大小都不相同。我想標準化圖像大小,以便我的產品一致顯示。但我也想用box-shadow使圖像更具吸引力。要使圖像尺寸相同,我必須剪下底部。但剪下底部也會從底部刪除箱形陰影。反正有這個問題嗎?
這裏是我的代碼示例:
<ul class="gameCover">
<li class="coverSpace"><img src="images/#IndexView.GameID#.jpg" alt="" title="" class="frontThumb" /></li>
<li><a href="##">→ See More</a></li>
</ul>
.gameCover {
float:left;
width:110px;
}
.coverSpace {
height:135px;
}
/* CATALOG GAME COVER IMG */
.frontThumb {
float:left;
position:absolute;
overflow:hidden;
clip:rect(0px, 100px 115px, 0px);
-moz-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
}
/* END CATALOG GAME COVER IMG */
謝謝!
Scott,請參閱更新的問題。我已經在圖像上使用了box-shadow屬性。 – Mohamad 2010-03-01 18:11:40
感謝您的代碼。假設每個'img.frontThumb'在它自己的''''''''''''''''''''裏面,我建議您在'.coverSpace'上設置'box-shadow'。 – 2010-03-01 18:32:30