2010-03-01 57 views
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="##">&rarr; 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 */ 

謝謝!

回答

1

沒有看到您的標記,我不知道這是否適用於您,但您可以將box-shadow應用於img的包含元素。

+0

Scott,請參閱更新的問題。我已經在圖像上使用了box-shadow屬性。 – Mohamad 2010-03-01 18:11:40

+0

感謝您的代碼。假設每個'img.frontThumb'在它自己的''''''''''''''''''''裏面,我建議您在'.coverSpace'上設置'box-shadow'。 – 2010-03-01 18:32:30

相關問題