有没有办法使剪辑属性与box-shadow属性一起使用？

我注意到使用剪辑属性也会删除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 */

谢谢！

来源

2010-03-01 Mohamad

没有看到您的标记，我不知道这是否适用于您，但您可以将box-shadow应用于img的包含元素。

来源

2010-03-01 18:07:22

Scott，请参阅更新的问题。我已经在图像上使用了box-shadow属性。 – Mohamad 2010-03-01 18:11:40

感谢您的代码。假设每个'img.frontThumb'在它自己的''''''''''''''''''''里面，我建议您在'.coverSpace'上设置'box-shadow'。 – 2010-03-01 18:32:30

有没有办法使剪辑属性与box-shadow属性一起使用？

回答

相关问题