Как скрыть эффект односторонней тени?

Question

<div id="cat"></div>

Как заштриховать тень только для левой и правой стороны?(без тени верхней нижней стороны)

Answer 1

установите z-index из woof выше мяу и grrrr будет отображаться поверх тени hisssss .

Answer 2

Вот скрытый подход при переполнении для одной боковой тени http://starikovs.com/2011/11/09/css3-one-side-shadow/. Надеюсь, это поможет вам.

Answer 3

С этим вы можете сделать это http://jsfiddle.net/QkXqU/

CSS:

div {
    float: left;
    overflow: hidden;
    padding: 0px 0px 10px 0px; /*  Use padding on the side where you want to show shadow. Padding amount should be same as shadows blur length. */
}

img {
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
    -moz-box-shadow: 0px 0px 10px 0px #000000;
    box-shadow: 0px 0px 10px 0px #000000;
}

HTML:

<div>
    <img src="http://lorempixum.com/output/nature-q-c-309-249-8.jpg" alt="trees" />
</div>