overflow遇到border-radius时无法隐藏
css3吧
全部回复
仅看楼主
level 7
tw3117 楼主
如上图,粉色div内嵌套一个绿色div,绿色div溢出部分被隐藏,但是在Chrome等浏览器下会出现角不能被隐藏的情况。有没有遇到相同情况的?
下图为overflow为可见的截图:

2012年10月30日 13点10分 1
level 8
啊,这真没试过,不过谢谢LZ提醒,下次要是用到就要注意啦
(其实我是来消灭0回复的)
2012年11月08日 13点11分 2
[Love]
2012年11月08日 14点11分
level 4
[汗]我在谷歌浏览器下测试了下,角也被隐藏了!
<div style=" height:404px; width:404px; border:2px #F00 solid; Border-radius:10px; overflow:hidden;">
<div style=" height:500px; width:500px;Border-radius:10px; background:#0F0;"></div>
</div>
这是我的代码!
2012年11月15日 02点11分 3
比较了一下发现区别在于,当子div的position属性为relative是会出现我所说的情况,代码及运行效果见5楼。
2012年11月15日 13点11分
level 7
tw3117 楼主
<div style="width:300px; height: 100px;overflow: hidden;border: 2px black solid;border-radius: 20px;background: #0F6;"><div style="width: 400px;height: 200px;border-radius: 5px;background: #F3C;position: relative;top: 50px;left: 200px;"></div></div>
运行结果如下图:
2012年11月15日 13点11分 5
level 11
确实有这样得问题,回头研究一下
2013年04月27日 01点04分 7
level 8
这个问题还真没注意过,感谢楼主提醒。得抽时间研究下。
2013年06月22日 04点06分 9
level 11
既然两个div都要放于边框处,两个div都设置border-radius不行吗?
2014年01月15日 09点01分 10
[大拇指]嗯,是个不错的办法。
2014年01月15日 09点01分
回复 tw3117 :[滑稽]
2014年01月16日 03点01分
level 1
2016年08月25日 04点08分 11
level 2
相对定位导致的
2016年10月17日 01点10分 12
level 1
没有问题啊
2016年11月05日 07点11分 13
1