CSS3縮放動畫帶邊框半徑

Question

我需要一種方法來製作帶有CSS3的縮放動畫，並使用border-radius。但正如你可以看到下面，它不能很好地工作：

工作代碼：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（邊緣和Firefox工作正常）。爲了解決這個問題，我添加了z-index和border-radius的供應商前綴見下文。

通過添加z-index: 100;優先.item並使用z-index: 0;來優先化圖像的優先順序。基本上這會強制圖像在.item之下。

而且我加廠商前綴（-moz-和-webkit-）爲border-radius：

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