1

clip プロパティを使用すると、 box-shadow プロパティも削除されることに気付きました。同じ要素で両方を使用する方法はありますか?

背景: 3 種類の製品に対して 3 つの列があります。各商品には画像があり、各画像はサイズが異なります。商品が一貫して表示されるように、画像サイズを標準化したい。しかし、画像をより魅力的にするために 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 */

ありがとう！

4

1 に答える 1

1

マークアップを見ないと、これがうまくいくかどうかわかりませんが、box-shadowのimg含む要素に適用できる可能性があります。

于 2010-03-01T18:07:22.697 に答える