overflow：hidden使用border-radius和CSS转换（仅限webkit） [英] overflow:hidden ignored with border-radius and CSS transforms (webkit only)

问题描述

我想在一个圆圈内有一个正方形图片。

I want to have a square image inside a circle.

当用户将鼠标悬停在图片上时，图片应该缩放（放大）。

When the user hovers over the image, the image should scale (zoom in).

圆形应该保持相同的大小。

The circle should remain the same size.

只有在CSS转换期间，方形图像与圆形重叠：

Only during the CSS transition, the square image overlaps the circle (as if overflow:hidden weren't there at all).

这里有一个演示了Chrome和Safari中奇怪的行为：
http://codepen.io/jshawl/full/flbau

Here's a demo with the weird behavior in Chrome and Safari: http://codepen.io/jshawl/full/flbau

在firefox中工作正常。 p>

Working ok in firefox.

推荐答案

查看此小提琴： http ：//jsfiddle.net/jHsAF/

我删除了一些多余的标记（圆形和方形容器...只需要一个）和样式的img本身：

I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself:

<div id=wrapper">
<img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test"></img>

#wrapper{
    width: 500px;
    height: 500px;
}
#test{    
    border-radius: 500px;
    transition: all 2s linear;
}
#test:hover{
    -webkit-transform: scale(1.2);   
}

编辑：see below fiddle：
http://jsfiddle.net/jHsAF/4/
需要添加以下代码：

see below fiddle: http://jsfiddle.net/jHsAF/4/ Needed to add the following code:

    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);

到父div。

：@Pigmess
Webkit不尊重overflow：hidden with边界半径

Credit: @Pigmess Webkit not respecting overflow:hidden with border radius

这篇关于overflow：hidden使用border-radius和CSS转换（仅限webkit）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！