Css 溢出隐藏，边框半径在chrome中不起作用

不确定这是chrome特有的bug还是什么，但当我转换父元素上的子元素时，溢出隐藏在边界半径中，溢出在转换到位时可见

var wrapper=document.getElementsByClassName（'wrapper'）[0]，
img=document.getElementsByTagName（'img'）[0]；
/*
单击边界区域中的任意位置以切换img
*/
wrapper.addEventListener（'click'，function（）{
如果（！img.className）{
img.className='hidden'；
}否则{
img.className=''；
}
}，假）
.wrapper{
溢出：隐藏；
边界半径：60px；
边框：1条实心鲑鱼；
}
img{
宽度：100%；
高度：自动；
不透明度：1；
过渡：不透明度1s；
}
.隐藏{
不透明度：0；
}
只需定位包装器元素，并给它一个
z-index
：


var wrapper=document.getElementsByClassName（'wrapper'）[0]，
img=document.getElementsByTagName（'img'）[0]；
/*
单击边界区域中的任意位置以切换img
*/
wrapper.addEventListener（'click'，function（）{
如果（！img.className）{
img.className='hidden'；
}否则{
img.className=''；
}
}，假）
.wrapper{
溢出：隐藏；
边界半径：60px；
边框：1条实心鲑鱼；
/*位置和z指数*/
位置：相对位置；
z指数：1；
}
img{
宽度：100%；
高度：自动；
不透明度：1；
过渡：不透明度1s；
}
.隐藏{
不透明度：0；
}

你是一个救生员，尝试了一切，甚至定位，除了z指数。谢谢@Emke np，很高兴我能帮忙：）