解决border-radius溢出问题以及overflow:hidden隐藏失效问题

今天在开发项目时遇到了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;