1

这是一个非常有趣的案例。

当 overflow:hidden 与 position:relative 一起使用时，奇怪的事情开始发生。自己看吧！

http://cssdeck.com/labs/u1om11qq

HTML

<div class="carrier">
    <div class="button"></div>
    <div class="button"></div>
</div>

CSS

.carrier{
    overflow:hidden;
    width:200px;
    height: 400px;
    border-radius: 50px;
    background:blue;
}
.button {
    position:relative;
    width: 200px;
    height: 200px;
    background-color:rgba(255,0,0,0.2);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
.button:hover{
    background-color:rgba(255,0,0,1);
}

这种情况（闪烁的边缘）是一个错误，还是我错过了一点？

（溢出：隐藏需要覆盖边缘——它会在 chrome 24.0.1312.57.m 上产生奇怪的闪烁）

4

1 回答 1

1

webkit 中有一个错误。

你可以在这里查看：

https://bugs.webkit.org/show_bug.cgi?id=67950

来自 Niklas 2011-09-12 13:04:56 PST 的描述 当在父元素上使用边框半径（溢出：隐藏）时，子节点将根据半径进行裁剪。但是，如果在父节点或子节点上使用任何 -webkit-transform 属性，边框半径就会丢失。

此处提供示例：http: //jsfiddle.net/DkXuR/

在这种情况下，它似乎也中断-webkit-transition了！

将您的目标元素包装在wrapper元素中并对其进行转换！

有很多关于圆角和剪辑内容的错误overflow:hidden：

于 2013-02-08T13:39:00.590 回答