仅在右侧和左侧的盒子阴影

Question

我只需要在元素的左右两侧制作一个盒子阴影.它应该褪色并变得更薄到顶部和底部.它也不应该在顶部和底部过流.

主要问题是我无法阻止阴影在元素的顶部和底部溢出.

这就是我所拥有的:

HTML:

<div></div>

CSS:

div{
    box-shadow: 0px 0px 20px 0px #000000;
}

Answer 1

您将需要使用两个框阴影,一个用于左阴影,一个用于右阴影.您需要在同一个box-shadow属性中指定两个框阴影,并用昏迷分隔它们:

box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;

两者都需要具有负的扩展值,因此它们比div高度短,并且不会在顶部和底部溢出.

DEMO

输出:

您需要调整阴影的值,以使其适应您要使用它的元素的大小.

HTML:

<div></div>

CSS:

div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}