Question

我使用CSS3制作了一个可爱的星际迷航红色警报动画。我的一个父元素包含border-radius和overflow:hidden，以便将任何内容裁剪为边框半径的形状。

这在Firefox中运行良好，但Webkit浏览器会将一些子元素悬挂在裁剪区域之外。

这是我的代码：

http://jsfiddle.net/doublewombat/EqK6R/embedded/result/

类名div的{{1}}包含curvedEdges和border-radius。然而，块和左和“警报”文本的右侧悬挂在此半径之外，即使它们是overflow:hidden的子元素。或者用简单的英语，动画的左右边缘应略微弯曲（如在Firefox中），而不是直线。

这是Webkit中的一个错误，还是我出错了？

如果你没有方便的Webkit浏览器，它就在YouTube上了......

http://www.youtube.com/watch?v=3vyVy21nWsE

Answer 1

首先，这是一个很酷的演示！

我环顾四周，似乎问题不在于你。 second answer to someone else's problem为我修复了它，虽然这对safari不起作用。解决方法是使用屏蔽：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

对同一个问题的接受答案有另一种解决方法，我认为这可以真正帮助你，但我似乎无法得到正确的元素组合和边界半径。

Answer 2

我一直在尝试做同样的事情，并且使用border-radius将元素屏蔽到圆圈。

我能够使用遮罩和径向渐变来在Safari 6.0.3中实现所需的效果（位置和大小的过渡）。

这是我添加到容器（masking）元素的单行代码：

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

我认为我必须使用硬色停止，如下所示，以获得硬边缘：

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

然而，它没有相同的工作（也许有人可以启发我们的原因）。剪辑不像border-radius那样平滑，但是它不可预测地超出边界而超出了图像。

你可能需要调整它以便与旧版本的Safari / Chrome等一起使用，我还没有在不同的版本（又名YMMV）上测试它。

Answer 3

它似乎是一个浏览器问题，如：https://code.google.com/p/chromium/issues/detail?id=157218

所述

基本上，当您将动画应用于元素时，出于性能原因，浏览器将在GPU（图形处理单元）中处理它，而其余部分则由CPU处理。最终将动画呈现在蒙版上方。

作为一种解决方法，您可以尝试添加一个不易察觉的transform属性，该属性还会触发掩码元素的GPU处理，将其提升到相同的动画级别：

#redAlert .curvedEdge {
    -webkit-transform: rotate(0.000001deg);
}

我想它可能因浏览器版本而异，但据报道这些其他值也会触发GPU处理：rotate(0)，translateZ(0)

Answer 4

这似乎是GPU /硬件合成的一个问题。 transform: translateZ(0);也应该解决问题。有关详细信息，请阅读http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

-webkit-transform: translateZ(0);
transform: translateZ(0);

我已经包含了供应商前缀，但您可以根据需要删除它们。

Answer 5

似乎是一个混合的工作修复：

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Answer 6

您可以使用边框半径和粗黑边框放置一个绝对定位的div，它会阻止您想要隐藏的部分。

我为另一个关于FF3.6中类似问题的问题做了一个演示：http://jsfiddle.net/vfp3v/15/

border-radius; overflow: hidden, and text is not clipped

Answer 7

就像抬头一样，如果我将面具应用于具有border-radius但没有边框的容器，这个修复只对我有用。最终，我最终得到了类似的东西：

<div style="border-radius: 15px; border: 1px solid red;">
    <div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
        <span style="position: relative; left; -20px;">Some stuff that overflows.</span>
    </div>
</div>

在内部div上有一个边框，裁剪并不完美。

非常奇怪。

Answer 8

我找到了另一个可能的解决方案，使用CSS3剪辑路径，但它只适用于最新版本的webkit（它似乎适用于Chrome 24，但不适用于Safari 6.0.2）。以下内容将围绕元素剪切一个圆圈：

-webkit-clip-path: circle(50%, 50%, 100%);

希望很快就会有更多浏览器实现！看起来这个功能可能会有很多很酷的应用程序。这是一篇相关的博文：http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/。

Webkit不尊重溢出：隐藏边框半径

8 个答案: