圆角overflow:hidden在子元素中设置了transform的时候圆角隐藏失败

css3 父元素是用border-radius：50%设置圆角,overflow:hidden之后子元素中设置了transform:skew 父元素的overflow:hidden在圆角的地方失效，仅仅是按照父元素为非圆角的时候覆盖子元素

这个文艺应该问么解决呢

yunnaneryuan

浏览 6577回答 5

5回答

慕粉1325569603

在父元素的css中设置position:relative;z-index:1;即可

慕运维1610465

-webkit-transform:rotate(0deg);实测有效

肆意妄为

你看下是不是父元素大小的问题，首先你将父元素写成固定大小，而且比子元素小点，再试试。有可能是子元素倾斜的时候对角将父元素撑大了，那样子元素就没有溢出，当然不会隐藏

arlenhui

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>a</title> <style type="text/css"> .box { width: 50px; height: 50px; overflow: hidden; border-radius: 10px; background-color: green; } .red { background-color: red; -webkit-transform:scale(1); transform:scale(1); } </style> </head> <body> <div> <div>123</div> </div> </body> </html>似乎没有遇到这个问题，可以贴代码和浏览器版本出来吗？

weibo_Z__张臻_0

我也遇到了同样的问题。父元素设置了border-radius、overflow : hidden属性，如果子元素设置了transform的话，子元素没有圆角效果

随时随地看视频慕课网APP