边界半径在过渡期间不起作用[重复]答案

【问题标题】：border-radius doesn't work during transition [duplicate]边界半径在过渡期间不起作用[重复]
【发布时间】：2015-10-29 01:00:41
【问题描述】：

我正在使用遮罩元素来剪辑图像，然后在悬停时缩放该图像。

我无法弄清楚为什么在过渡期间边框半径似乎停止存在于遮罩元素上。

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)

【问题讨论】：

这看起来像是一个 Safari 问题
你应该使用border-radius: 50%; 来表示一个圆圈。
我没有看到问题是在某个浏览器中出现这种情况吗？
@kfreeman04208：这可能是因为 OP 似乎已将z-index: 1（修复）添加到笔中。有问题的代码没有它。此问题是一种已知行为（至少在 Chrome 和其他支持 webkit 的浏览器中）。

标签： css animation masking

【解决方案1】：

尝试将 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)

【讨论】：