有没有办法使剪辑属性与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="##">→ 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 */
谢谢!
答
没有看到您的标记,我不知道这是否适用于您,但您可以将box-shadow
应用于img
的包含元素。
Scott,请参阅更新的问题。我已经在图像上使用了box-shadow属性。 – Mohamad 2010-03-01 18:11:40
感谢您的代码。假设每个'img.frontThumb'在它自己的''''''''''''''''''''里面,我建议您在'.coverSpace'上设置'box-shadow'。 – 2010-03-01 18:32:30