box-shadow被overflow:hidden截断的解决方法

2024-01-26 分类：网站建设

CSS3中的box-shadow这个属性可以给盒子加上投影效果，在默认情况下outset的。也就是说边框在盒子外面，并且不占用盒子的布局空间。那么这就产生了问题，如果盒子紧挨着容器，而容器设置有overflow:hidden属性不就会把投影效果截断了吗？对，容器会截断投影效果！ <style> body {font:14px/32px 微软雅黑;} div {overflow:hidden;float:left;} span {box-shadow:0px 0px 5px #CCC;display:inline-block;} </style> <div> <span>诶？我的投影效果哪儿去了？</span> </div>

这个情况就是span上设置的投影效果被div上的overflow:hidden切掉了，那么如何让它不切掉呢？这很容易，只要span不紧挨着div就不会被切掉了嘛，我们可以给div加个padding:5px，让span和div之间有5px的空间用来渲染投影，但是加padding的话div的宽度会增加吧？我们当然不能破坏原来的布局，因此不能让宽度增加，或者至少不能让常规流的行空间减少。于是在加了padding的同时使用负margin来消耗掉padding增加的空间。 <style> body {font:14px/32px 微软雅黑;} div {overflow:hidden;float:left;padding:5px;margin:-5px;} span {box-shadow:0px 0px 5px #CCC;display:inline-block;} </style> <div> <span>呜咕～投影效果出现啦～</span> </div>

这样就既解决了投影被切掉的问题，也不会影响到常规流的布局了。

文章名称：box-shadow被overflow:hidden截断的解决方法
链接分享：https://www.cdcxhl.com/news18/315468.html

成都网站建设公司_创新互联，为您提供关键词优化、品牌网站制作、网站导航、电子商务、定制开发、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容