css - 使用 CSS3 过渡的溢出问题

Question

我正在尝试在下面的 JsFiddle 上制作一个可见的小动画。

但正如您所见，在动画期间边界半径不起作用......

有解决办法吗？

http://jsfiddle.net/toroncino/V4V97/

这是我的代码：

a {
    border-radius: 10px;
    display: inline-block;
    height: 300px;
    overflow: hidden;
}

a img {
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    width: 100%;
    height: 100%;
}

a:hover img {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Answer 1

这是由 Chromium 继承的Webkit 中的一个长期存在的错误（参见https://bugs.webkit.org/show_bug.cgi?id=68196 ）（参见https://code.google.com/p/chromium/issues/详细信息？id=157218）

如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出中发布了一种解决方法

你基本上需要在容器元素上设置一个 CSS 掩码

/*1x1 pixel black png*/
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

在http://jsfiddle.net/V4V97/2/工作演示