CSS3带边框半径的缩放动画

我需要一种方法，在具有

边界半径的div中使用CSS3制作缩放动画。但正如您在下面所看到的，它并不能很好地工作：


工作代码：

CSS:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 21s;
  -webkit-transition: all 21s;
  transition: all 21s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

HTML:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 21s;
  -webkit-transition: all 21s;
  transition: all 21s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>



有没有办法解决这个问题？
根据我的研究，我只是在Chrome上复制了这一点（Edge和Firefox可以正常工作）。为了解决这个问题，我添加了
z-index
和
边界半径的供应商前缀，见下文

通过添加
z-index:100对
.item
进行优先级排序并使用
z-index:0对图像进行去优先级处理。基本上，这将强制图像位于
.item
下

我为
边界半径
添加了供应商前缀（
-moz-
和
-webkit-
）：

  -moz-border-radius:10px; /* add this */
  -webkit-border-radius: 10px; /* add this */

请参阅代码片段：


*{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
.项目{
z索引：100；/*添加此*/
位置：相对位置；
-moz边界半径：10px；/*添加此*/
-webkit边界半径：10px；/*添加此*/
边界半径：10px；
边框：1px实心#333；
利润率：2%；
溢出：隐藏；
宽度：540px；
}
.项目img{
最大宽度：100%；
z索引：0；/*添加此*/
-moz转换：所有2s；
-webkit转换：所有2；
过渡：所有2；
}
.项目：悬停img{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}

在哪些方面效果不好？您的示例对我来说很好，什么地方效果不好？@LGSon在动画中，边框不是圆形的，正如您在JSFIDLE上面和上面的屏幕截图中所看到的那样。@LarsBeck在动画中，边框不是圆形的，正如您在上面和JSFIDLE上的屏幕截图所看到的那样。这在Chrome中发生。Edge和Firefox可以正常工作。因为z-index只对定位元素（位置：绝对、位置：相对或位置：固定）起作用，所以肯定还有其他东西wrong@LGSon在我的Chrome版本中：
56.0.2924.87版（64位）
有时不起作用。@adricadar你说有时不起作用是什么意思？@xRobot尝试添加此
-moz边框半径：10px；/*添加此*/-webkit边框半径：10px；/*同时添加此*/
。O再次运行我的示例，我已经添加了它们。@LGSon我的意思是，如果我多次悬停，有时我可以看到拐角。我看到了您的示例，在我的
Chrome
版本中也是如此。