html – 只在右侧和左侧的盒子阴影

前端之家收集整理的这篇文章主要介绍了html – 只在右侧和左侧的盒子阴影前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我只需要在元素的左右两侧制作一个盒子阴影.它应该褪色并变得更薄到顶部和底部.它也不应该在顶部和底部过流.

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

这就是我所拥有的:

HTML

<div></div>

CSS:

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

解决方法

您将需要使用两个框阴影,一个用于左阴影,一个用于右阴影.您需要在同一个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;
}
原文链接:https://www.f2er.com/html/225077.html

猜你在找的HTML相关文章