溢出：使用边框半径和 CSS 转换忽略隐藏（仅限 webkit）答案

【问题标题】：overflow:hidden ignored with border-radius and CSS transforms (webkit only)溢出：使用边框半径和 CSS 转换忽略隐藏（仅限 webkit）
【发布时间】：2013-05-28 12:20:31
【问题描述】：

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

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

圆圈的大小应该保持不变。

只有在 CSS 过渡期间，方形图像才会与圆形重叠（好像 overflow:hidden 根本不存在）。

以下是 Chrome 和 Safari 中奇怪行为的演示： http://codepen.io/jshawl/full/flbau

在 Firefox 中工作正常。

【问题讨论】：

你是我见过的唯一一个问这个的人......荣誉

标签： css css-transitions css-transforms

【解决方案1】：

您需要将此代码添加到您的 img 的父级：

position:relative;
z-index:1;

此处示例：http://codepen.io/DavidN/pen/dIzJK

【讨论】：

我已经有了position:relative，但添加z-index:1 修复了它。谢谢！
谢谢大卫，这让我困扰了很久。
是的，这个解决方案对我很有帮助。我没有使用圆圈，所以不想使用面具。现在似乎有点明显了。
这里是另一个 +1，当您在带有圆角的锚点内有一个图像并且想要在悬停时“放大”时，这很有效。想想就很简单。谢谢
这是更好的答案，因为使用蒙版也会隐藏框阴影。

【解决方案2】：

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

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}

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

【讨论】：

圆圈大小应该保持不变
不要过于复杂这是答案位置：相对； z-index:1;

【解决方案3】：

将此代码添加到您的父 div 并解决问题：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？

【解决方案4】：

看起来好像你为一个元素设置了太多样式！我创建了一个fork here

我编辑了您的一些 SASS 代码以利用 compass 库并更好地利用 transition 和 transform 属性，可以在此处看到：

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

希望这会有所帮助！只需将circle 元素视为包含有关空间的一般信息的父容器（例如500px 宽和500px 高）。图像本身具有500px 的圆形边框。这是您要编辑的元素！您可以在此处缩放和转换此元素，而无需与父 circle 容器交互。参考compass 了解有关使用库的更多信息！祝你好运！

【讨论】：

在图像中添加溢出：隐藏很奇怪。不应该在父母身上吗？
最好的方法是尝试！从.circle img 中删除overflow 属性并将其放入.circle 并查看结果。你甚至需要overflow 属性吗？
哦，等等，我刚刚意识到你的叉子让圆圈变大了。圆圈应该保持相同的大小。图片应该变大
查看这个分叉。没有边界半径有效。边框半径不codepen.io/jshawl/pen/skGJl
让我们continue this discussion in chat