具有邊框半徑的CSS3縮放動畫

Question

我需要一種使用CSS3在帶有border-radius的div中制作縮放動畫的方法。 但是正如您在下面看到的那樣，它不能很好地工作：

工作代碼： https ： //jsfiddle.net/n5owxmch/

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);
}

HTML：

<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>

有辦法解決嗎？

Answer 1

從我的研究中，我僅在Chrome中復制了此內容（ Edge和Firefox可以正常工作 ）。 為了解決這個問題，我為border-radius添加了z-index和供應商前綴，請參見下文。

通過添加z-index: 100;對.item進行優先級排序z-index: 100; 並使用z-index: 0;對圖像進行優先級排序z-index: 0; 。 基本上，這將強制圖像位於.item 。

我為border-radius添加了供應商前綴（ -moz-和-webkit- ）：

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

見摘要：

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .item { z-index: 100; /* add this */ position: relative; -moz-border-radius:10px; /* add this */ -webkit-border-radius: 10px; /* add this */ border-radius: 10px; border: 1px solid #333; margin: 2%; overflow: hidden; width: 540px; } .item img { max-width: 100%; z-index: 0; /* add this */ -moz-transition: all 2s; -webkit-transition: all 2s; transition: all 2s; } .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>