Есть ли способ заставить свойство clip работать со свойством box-shadow? - PullRequest
Новая
       12

Есть ли способ заставить свойство clip работать со свойством box-shadow?

2 голосов
/ 01 марта 2010

Я заметил, что использование свойства 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 */

Спасибо!

1 Ответ

1 голос
/ 01 марта 2010

Не видя вашей разметки, я не знаю, сработает ли это для вас, но вы могли бы применить box-shadow к содержащему img элементу.

...