Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

解决box-shadow被overflow:hidden截断

  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>

  这样就既解决了投影被切掉的问题,也不会影响到常规流的布局了。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^