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

Question

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

谢谢!

Answer 1

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