Question

这是非常有趣的案例。

当溢出：隐藏与位置：相对使用时，奇怪的事情开始发生。亲眼看看！

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上创建一个奇怪的闪烁）

Answer 1

webkit中存在此错误。

你可以在这里查看：

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

说明来自Niklas 2011-09-12 13:04:56 PST使用时   父节点上的border-radius（具有overflow：hidden）子节点   根据半径剪裁。但是，是任何-webkit-transform   property在border-radius所在的父节点或子节点上使用   丢失。

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

在这种情况下，它似乎也与-webkit-transition打破了！

将目标元素包裹在wrapper元素中并进行转换！

有很多关于圆角的错误，并使用overflow:hidden剪切内容：

可能或滥用的功能？溢出：隐藏的怪异

1 个答案: