今天在开发项目时遇到了border-radius的溢出问题,当我给外层ul设置一个border-radius时,内层li的内容就出现了溢出问题,会超过外层的border-radius。
解决方案1:在父元素ul的样式中添加overflow:hidden,这样超过ul的元素就会被隐藏。
效果:
解决方案2:给子元素li添加与外层ul相同弧度的border-radius。
效果:
就变成了这个鬼样子,这个方法一般只适用于只嵌套了一个子元素的时候,像这样就可以完美解决。
然后我查了很多资料发现,还有overflow:hidden隐藏失效问题(虽然我还没遇到过),在这里一起贴一下解决方案。
方法1:在父元素设置transform:rotate(0deg);
方法2:在父元素设置position:relative;z-index:1;