Question

我注意到使用clip属性也会删除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的包含元素。

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

1 个答案: