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

概述我只需要在元素的左右两侧制作一个盒子阴影.它应该褪色并变得更薄到顶部和底部.它也不应该在顶部和底部过流. 主要问题是我无法阻止阴影在元素的顶部和底部溢出. 这就是我所拥有的： HTML： <div></div> CSS： div{ box-shadow: 0px 0px 20px 0px #000000;} 您将需要使用两个框阴影,一个用于左阴影,一个用于右阴影.您需要在同一个box-s 我只需要在元素的左右两侧制作一个盒子阴影.它应该褪色并变得更薄到顶部和底部.它也不应该在顶部和底部过流.

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

这就是我所拥有的：

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;}

总结

以上是内存溢出为你收集整理的html – 只在右侧和左侧的盒子阴影全部内容，希望文章能够帮你解决html – 只在右侧和左侧的盒子阴影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。