css - 边界半径在过渡期间不起作用

This question already has answers here:

Issue while using transitions + opacity change + overflow hidden
                                
                                    （2个答案）
                                
                        
                                4年前关闭。
            
                    
我正在使用遮罩元素裁剪图像，然后在悬停时缩放该图像。

我无法弄清楚为什么过渡期间边界半径似乎不再存在于蒙版元素上。

http://codepen.io/corysimmons/pen/rOvdXX?editors=110

<div class="mask">
  <img src="http://placekitten.com/505/505">
</div>

.mask
  overflow: hidden
  width: 300px
  height: 300px
  border-radius: 999em
  img
    transition: all 500ms ease
  &:hover
    img
      transform: scale(1.2)

最佳答案

尝试将z-index添加到蒙版中，将其放置在图像顶部。

.mask
  overflow: hidden
  width: 300px
  height: 300px
  border-radius: 50%
  z-index : 1;
  position : relative;
  img
    transition: all 500ms ease
  &:hover
    img
      transform: scale(1.2)